當(dāng)小程序自帶的tabBar不能滿(mǎn)足需求時(shí)（比如：點(diǎn)擊底部需要跳轉(zhuǎn)到其它小程序或者登錄的身份不同需要打開(kāi)不同的鏈接時(shí)）从隆，這時(shí)需要用到小程序的自定義tabBar歉眷。

1. 先在根目錄下新建自定義tabBar文件夾（一定要放到根目錄下）

image.png

2. 配置app.json里的tabBar

"tabBar":{
    "custom": true,
    "color": "#666666",
    "selectedColor": "#3d90f7",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/newMycard/newMycard",
        "text": "首頁(yè)",
        "iconPath": "/assest/images/footer.png",
        "selectedIconPath": "/assest/images/footer-active.png"
      },
      {
        "pagePath": "pages/activeArea/activeArea",
        "text": "活動(dòng)頁(yè)",
        "iconPath": "/assest/images/footerArea.png",
        "selectedIconPath": "/assest/images/footerAreaAc.png"
      },
      {
        "pagePath": "pages/hot/hot",
        "text": "跳轉(zhuǎn)其它小程序",
        "iconPath": "/assest/images/hot.png",
        "selectedIconPath": "/assest/images/hot-active.png"
      }
    ]
  },

3. 回到自定義的頁(yè)面

1.1 wxml內(nèi)容如下：

<cover-view class="tab-bar">
  <cover-view wx:for="{{list}}" wx:key="index" class="menu-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-view class="tabbar-wrap">
      <cover-view class="pic">
        <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
      </cover-view>
      <cover-view class="text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
    </cover-view>
  </cover-view>
</cover-view>

1.2 js內(nèi)容如下：
（需要跳轉(zhuǎn)到其它小程序的頁(yè)面可以建一個(gè)空白頁(yè)崇决，也可以用其它頁(yè)面）

Component({
  data: {
    selected: 0,
    color: "#666666",
    selectedColor: "#3d90f7",
    list: [
      {
        pagePath: "/pages/newMycard/newMycard",
        text: "首頁(yè)",
        iconPath: "/assest/images/footer.png",
        selectedIconPath: "/assest/images/footer-active.png"
      },
      {
        pagePath: "/pages/activeArea/activeArea",
        text: "活動(dòng)頁(yè)",
        iconPath: "/assest/images/footerArea.png",
        selectedIconPath: "/assest/images/footerAreaAc.png"
      },
      {
        pagePath: "/pages/hot/hot",
        text: "跳轉(zhuǎn)其它小程序",
        iconPath: "/assest/images/hot.png",
        selectedIconPath: "/assest/images/hot-active.png"
      }
    ]
  },
  methods: {
    switchTab(e) {
      const url = e.currentTarget.dataset.path;
      const index = e.currentTarget.dataset.index;
      if (index == 2) {
         //如果下標(biāo)為2材诽，就跳轉(zhuǎn)其它小程序
      } else {
        wx.switchTab({ url })
      }
      this.setData({
        selected: index
      })
    },
  }
})

4. 在需要跳轉(zhuǎn)的頁(yè)面（首頁(yè)和活動(dòng)頁(yè)）加上這段代碼

1.1 首頁(yè)

onShow: function () {
    // tabbar
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
}

1.2 活動(dòng)頁(yè)

onShow: function () {
    // tabbar
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 1
      })
    }
}

到此自定義tabBar就完成了，歡迎大家學(xué)習(xí)交流恒傻。