---
title: 导航栏
date: 2023-05-28 16:17:38
permalink: /pages/component/nav
article: false
---

nav 导航栏是结合 uni-app 的 scroll-view 标签设计出来的，使用的时候一些属性可以参考一下 [uni-app 的文档](https://uniapp.dcloud.io/component/scroll-view)，类名 nav 和 cu-item 是必选值

### 默认

通过一个变量来控制当前已选中的tab

```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>
```