小程序自定義 tabbar 以vant weapp為例

1.首先建立 custom-tab-bar 文件夾  包含 index.js  index.json index.wxml

// index.js文件
Component({ data: { active: 0, list: [ { "url": "/pages/index/index", "icon": "wap-home-o", "text": "首頁" }, { "url": "/pages/index/prize", "icon": "orders-o", "text": "獎品" }, { "url": "/pages/index/exchange", "icon": "points", "text": "兌換" }, { "url": "/pages/index/my", "icon": "user-circle-o", "text": "我的" } ] }, methods: { onChange(e) { console.log(e,'e') this.setData({ active: e.detail }); wx.switchTab({ url: this.data.list[e.detail].url }); }, init() { const page = getCurrentPages().pop();
         this.setData({ 　 active: this.data.list.findIndex(item => item.url === `/${page.route}`)
 }); } } });

index.json文件

{ "component": true, "usingComponents": { "van-tabbar": "@vant/weapp/tabbar/index", "van-tabbar-item": "@vant/weapp/tabbar-item/index", "van-icon": "@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>

  /** * 生命周期函數--監聽頁面顯示 在每個tabbar頁面onshow 調用即可; */ onShow: function () { console.log('個人中心') this.getTabBar().init(); },

 app.json文件

{ "pages": [ "pages/index/index", "pages/index/prize", "pages/index/exchange", "pages/index/my" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "usingComponents": { }, "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#000000", "list": [ { "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/index/prize", "text": "獎品" }, { "pagePath": "pages/index/exchange", "text": "兌換" }, { "pagePath": "pages/index/my", "text": "我的" } ] }, "sitemapLocation": "sitemap.json" }

 原創未經允許不得轉載！！！轉載請注明出處~謝謝合作；