小程序自定义 tabbar 以vant weapp为例

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