1.實(shí)現(xiàn)效果
2.實(shí)現(xiàn)原理
3.實(shí)現(xiàn)步驟
1.在 app.json 中的 tabBar 項(xiàng)指定 custom 字段迁筛，同時(shí)其余 tabBar 相關(guān)配置也補(bǔ)充完整丸凭。
2.在代碼根目錄下添加入口文件
3. 編寫(xiě) tabBar 代碼
用自定義組件的方式編寫(xiě)即可，該自定義組件完全接管 tabBar 的渲染。另外，自定義組件新增 getTabBar 接口，可獲取當(dāng)前頁(yè)面下的自定義 tabBar 組件實(shí)例。
4.The last but the most important
要在這些自定義tabbar頁(yè)的onShow中調(diào)用以下代碼：
onShow() {
? ? //自定義的tabbar
? ? if (typeof this.getTabBar === 'function' &&
? ? ? this.getTabBar()) {
? ? ? this.getTabBar().setData({
? ? ? ? selected: 1
? ? ? })
? ? }
? },
4.完整代碼（更多代碼請(qǐng)移至碼云）
https://gitee.com/susuhhhhhh/wxmini_demo
5.部分代碼
Component({
? data: {
? ? selected: 0,
? ? color: "#333333",
? ? selectedColor: "#6B1F72",
? ? list: [{
? ? ? pagePath: "/pages/cal/index",
? ? ? iconPath: "/img/tabbar/icon_index.png",
? ? ? selectedIconPath: "/img/tabbar/icon_index_sel.png",
? ? ? text: "首頁(yè)"
? ? }, {
? ? ? pagePath: "/pages/charts/index",
? ? ? iconPath: "/img/tabbar/icon_order.png",
? ? ? selectedIconPath: "/img/tabbar/icon_order_sel.png",
? ? ? text: "餅圖"
? ? }, {
? ? ? pagePath: "/pages/addImg/index",
? ? ? iconPath: "/img/tabbar/icon_safe.png",
? ? ? selectedIconPath: "/img/tabbar/icon_safe_sel.png",
? ? ? text: "上傳圖片"
? ? }, {
? ? ? pagePath: "/pages/sendCode/index2",
? ? ? iconPath: "/img/tabbar/icon_my.png",
? ? ? selectedIconPath: "/img/tabbar/icon_my_sel.png",
? ? ? text: "驗(yàn)證碼"
? ? }]
? },
? attached() {
? },
? methods: {
? ? switchTab(e) {
? ? ? const data = e.currentTarget.dataset
? ? ? const url = data.path
? ? ? wx.switchTab({url})
? ? ? this.setData({
? ? ? ? selected: data.index
? ? ? })
? ? }
? }
})
