從官方下載代碼
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
1、把custom-tab-bar 文件放置 pages同級
修改下 custom-tab-bar 下的 JS文件
Component({data: {selected: 0,color: "#7A7E83",selectedColor: "#3cc51f",list: [{pagePath: "/pages/index/index",iconPath: "/static/images/ico/home.png",selectedIconPath: "/static/images/ico/home.png",text: "A"}, {pagePath: "/pages/product/product",iconPath: "/static/images/ico/home.png",selectedIconPath: "/static/images/ico/home.png",text: "B"},{pagePath: "/pages/news/news",iconPath: "/static/images/ico/home.png",selectedIconPath: "/static/images/ico/home.png",text: "C"},{pagePath: "/pages/my/my",iconPath: "/static/images/ico/home.png",selectedIconPath: "/static/images/ico/home.png",text: "D"},
]},attached() {},methods: {switchTab(e) {const data = e.currentTarget.datasetconst url = data.pathwx.switchTab({url})// this.setData({ 這部分注銷，到其他頁進行賦值// selected: data.index// })}}
})
2、跳轉到指定頁面時，在當頁面JS上加上代碼：
onShow: function () { //上面注銷得部分， 在A-D頁面對應上， A頁面=0 ，B=1 以此類推if (typeof this.getTabBar === 'function' && this.getTabBar()) {this.getTabBar().setData({selected: 0 //這里的數字設置當前頁面在tabbar里對應的序列，從0開始})}}
3、在app.json 開啟自定義tab
"tabBar": {"custom": true, //開啟"color": "#767676","selectedColor": "#004F8A","backgroundColor": "#fff","borderStyle": "black","list": [
4、在app.js 隱藏原生得JS
// app.js
App({onLaunch() {wx.hideTabBar(); //隱藏原生得tab bar // 展示本地存儲能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)
)
