WeChat-SmallProgram++：微信小程序自定義底部tabbar

1）：實現效果：

2）：實現原理：自定義tabBar微信開放文檔

3）：實現步驟

在 app.json 中的 tabBar 項指定 custom 字段，同時其餘 tabBar 相關配置也補充完整。

"tabBar": {
    "custom": true,
    "color": "#39b54a",
    "selectedColor": "#39b54a",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "box-shadow": "0 0 6px 0",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/images/home.png",
        "selectedIconPath": "static/images/[email protected]",
        "text": "首頁"
      },
      {
        "pagePath": "pages/catalog/catalog",
        "iconPath": "static/images/home.png",
        "selectedIconPath": "static/images/[email protected]",
        "text": "分類"
      }
    ]
  }

在代碼根目錄下添加入口文件

編寫 tabBar 代碼

用自定義組件的方式編寫即可，該自定義組件完全接管 tabBar 的渲染。

另外，自定義組件新增 getTabBar 接口，可獲取當前頁面下的自定義 tabBar 組件實例。

要在這些自定義tabbar頁的onShow中調用以下代碼：

if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1  // 1 不是固定值 根據自己分類而定
   })
}

戳我查看>更多開源封裝組件

---

 

人生無常大腸包小腸