【uniapp】uview 自定义 tabBar 底部导航栏_uview tabbar

在 uview1.x 中，不用在 pages.json 里配置 tabBar 属性，比如要在首页配置自定义底部导航栏，就在对应组件中：

		<u-tabbar v-model="current" :list="list" :before-switch="beforeSwitch" inactive-color="#999999"
			active-color="#0D7EDB">
		</u-tabbar>
1
2
3

常用的配置：
current ：对应当前激活的图标；
list ：导航栏列表；
before-switch ：切换调用的钩子函数，参数对应下标；
inactive-color：未激活的文字颜色；
active-color：已激活的文字颜色；

配置菜单列表：

computed: {
		list() {
			const arr = [
				{
					selectedIconPath: '../../../../static/todo1.png',
					iconPath: '../../../../static/todo.png',
					text: "待办",
				},
				{
					selectedIconPath: '../../../../static/stage1.png',
					iconPath: '../../../../static/stage.png',
					text: "首页",
				},
			]
			return arr;
		}
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

页面跳转：

beforeSwitch(index) {
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/todo/todo'
				})
			} else {
				uni.navigateTo({
					url: '//pages/index/index'
				})
			}
		},
1
2
3
4
5
6
7
8
9
10
11

跳转到对应页面，也需要配置 u-tabbar；