mjz update

2023-06-07 23:32:56 +08:00
parent 1e24f6a9d3
commit 75314726b8
12 changed files with 996 additions and 27 deletions
@@ -5,10 +5,89 @@ permalink: /pages/component/nav
 article: false
 ---

-## 操作条
+nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的时候一些属性可以参考一下 [uni-app 的文档](https://uniapp.dcloud.io/component/scroll-view)，类名 nav 和 cu-item 是必选值
+
+### 默认
+
+通过一个变量来控制当前已选中的tab

-::: details 点此查看页面源代码
-页面位置：`/pages/component/nav`
 ```vue
+<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
+	<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in 10" :key="index" @tap="tabSelect" :data-id="index">
+		Tab{{index}}
+	</view>
+</scroll-view>
+ 
+<script>
+	export default {
+		data() {
+			return {
+				TabCur: 0,
+				scrollLeft: 0
+			};
+		},
+		methods: {
+			tabSelect(e) {
+				this.TabCur = e.currentTarget.dataset.id;
+				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
+			}
+		}
+	}
+</script>
 ```
-:::
+
+### 居中
+
+父容器加上 class 类名 `text-center`
+
+```html
+<scroll-view scroll-x class="bg-white nav text-center">
+	<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
+		Tab{{index}}
+	</view>
+</scroll-view>
+```
+
+### 平分
+
+设置 flex 和 flex-sub 实现弹性布局，flex-sub 就是 css 属性 flex:1，将弹性盒子内子元素按照 1:1:1:1 来分配空间
+
+```html
+<scroll-view scroll-x class="bg-white nav">
+	<view class="flex text-center">
+		<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in 4" :key="index" @tap="tabSelect" :data-id="index">
+			Tab{{index}}
+		</view>
+	</view>
+</scroll-view>
+```
+
+### 背景
+
+加上 class 类名 `bg-red|...`，参考背景
+
+```html
+<scroll-view scroll-x class="bg-red nav text-center">
+	<view class="cu-item" :class="index==TabCur?'text-white cur':''" v-for="(item,index) in 3" :key="index" @tap="tabSelect" :data-id="index">
+		Tab{{index}}
+	</view>
+</scroll-view>
+```
+
+### 图标
+
+里面 tab 文字前加上图标 `cuIcon-`，参照图标
+
+```html
+<scroll-view scroll-x class="bg-green nav text-center">
+	<view class="cu-item" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
+		<text class="cuIcon-camerafill"></text> 数码
+	</view>
+	<view class="cu-item" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
+		<text class="cuIcon-upstagefill"></text> 排行榜
+	</view>
+	<view class="cu-item" :class="2==TabCur?'text-white cur':''" @tap="tabSelect" data-id="2">
+		<text class="cuIcon-clothesfill"></text> 皮肤
+	</view>
+</scroll-view>
+```