使用uview组件tabbar底部导航栏,点击按钮实现页面切换
导航栏结构代码
<u-tabbar v-model="current" :list="list" @change="navigatorTo"></u-tabbar>
Js代码
export default {
data() {
return {
current: 0,
list: [{
iconPath: "home",
selectedIconPath: "home-fill",
text: '首页',
customIcon: false,
pagePath: '/pages/business/home/home'
},
{
iconPath: "photo",
selectedIconPath: "photo-fill",
text: '站点',
customIcon: false,
pagePath: '/pages/business/site/list'
}
],
}
},
methods: {
navigatorTo(index) {
let url = this.list[index].pagePath
uni.navigateTo({
url: url,
})
}
},
}