小程序自定义 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(); },

效果：