在 uview1.x 中,不用在 pages.json
里配置 tabBar
属性,比如要在首页配置自定义底部导航栏,就在对应组件中:
<u-tabbar v-model="current" :list="list" :before-switch="beforeSwitch" inactive-color="#999999"
active-color="#0D7EDB">
</u-tabbar>
常用的配置:
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;
}
},
页面跳转:
beforeSwitch(index) {
if (index === 0) {
uni.navigateTo({
url: '/pages/todo/todo'
})
} else {
uni.navigateTo({
url: '//pages/index/index'
})
}
},
跳转到对应页面,也需要配置 u-tabbar
;