1.首先創建 custom-tab-bar 文件夾 包含 index.js index.json index.wxml
// index.js文件
// index.js文件
Component({
data: {
active: 0,
list: [
{
"url": "/pages/mine/mine",
"icon": "wap-home-o",
"text": "開單"
},
{
"url": "/pages/orderMeal/orderMeal",
"icon": "orders-o",
"text": "點菜"
},
{
"url": "/pages/getOrder/getOrder",
"icon": "points",
"text": "已點菜品"
},
{
"url": "/pages/shopCart/shopCart",
"icon": "user-circle-o",
"text": "購物車"
}
]
},
methods: {
onChange(e) {
console.log(e,'e')
wx.switchTab({
url: this.data.list[e.detail].url
});
this.setData({ active: e.detail });
},
init() {
const page = getCurrentPages().pop();
this.setData({
active: this.data.list.findIndex(item => item.url === `/${page.route}`)
});
}
}
});
index.json文件
{
"component": true,
"usingComponents": {
"van-tabbar": "/miniprogram_npm/vant-weapp/tabbar/index",
"van-tabbar-item": "/miniprogram_npm/vant-weapp/tabbar-item/index",
"van-icon": "/miniprogram_npm/vant-weapp/icon/index"
}
}
index.wxml文件
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
item.text
}}</van-tabbar-item>
</van-tabbar>
2.修改app.json
app.json文件
{
"pages": [
"pages/login/login",
"pages/index/index",
"pages/logs/logs",
"pages/pointTable/pointTable",
"pages/mine/mine",
"pages/orderMeal/orderMeal",
"pages/getOrder/getOrder",
"pages/shopCart/shopCart",
"custom-tab-bar/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#FF9800",
"navigationBarTitleText": "hpos",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index",
"van-card": "/miniprogram_npm/vant-weapp/card/index"
},
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [
{
"pagePath": "pages/mine/mine",
"text": "開單"
},
{
"pagePath": "pages/orderMeal/orderMeal",
"text": "點菜"
},
{
"pagePath": "pages/getOrder/getOrder",
"text": "已點菜品"
},
{
"pagePath": "pages/shopCart/shopCart",
"text": "購物車"
}
]
}
}
3.最后每個使用tabbar的頁面加上這一句，不加高亮顯示慢一步。
/**
* 生命周期函數--監聽頁面顯示 在每個tabbar頁面onshow 調用即可;
*/
onShow: function () {
this.getTabBar().init();
},
效果：
————————————————
版權聲明：本文為CSDN博主「江湖行騙老中醫」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/liming1016/article/details/109219740