小程序如何自定义tabBar？

当小程序自带的tabBar不能满足需求时（比如：点击底部需要跳转到其它小程序或者登录的身份不同需要打开不同的链接时），这时需要用到小程序的自定义tabBar。

1. 先在根目录下新建自定义tabBar文件夹（一定要放到根目录下）

image.png

2. 配置app.json里的tabBar

"tabBar":{
    "custom": true,
    "color": "#666666",
    "selectedColor": "#3d90f7",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/newMycard/newMycard",
        "text": "首页",
        "iconPath": "/assest/images/footer.png",
        "selectedIconPath": "/assest/images/footer-active.png"
      },
      {
        "pagePath": "pages/activeArea/activeArea",
        "text": "活动页",
        "iconPath": "/assest/images/footerArea.png",
        "selectedIconPath": "/assest/images/footerAreaAc.png"
      },
      {
        "pagePath": "pages/hot/hot",
        "text": "跳转其它小程序",
        "iconPath": "/assest/images/hot.png",
        "selectedIconPath": "/assest/images/hot-active.png"
      }
    ]
  },

3. 回到自定义的页面

1.1 wxml内容如下：

<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内容如下：
（需要跳转到其它小程序的页面可以建一个空白页，也可以用其它页面）

Component({
  data: {
    selected: 0,
    color: "#666666",
    selectedColor: "#3d90f7",
    list: [
      {
        pagePath: "/pages/newMycard/newMycard",
        text: "首页",
        iconPath: "/assest/images/footer.png",
        selectedIconPath: "/assest/images/footer-active.png"
      },
      {
        pagePath: "/pages/activeArea/activeArea",
        text: "活动页",
        iconPath: "/assest/images/footerArea.png",
        selectedIconPath: "/assest/images/footerAreaAc.png"
      },
      {
        pagePath: "/pages/hot/hot",
        text: "跳转其它小程序",
        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) {
         //如果下标为2，就跳转其它小程序
      } else {
        wx.switchTab({ url })
      }
      this.setData({
        selected: index
      })
    },
  }
})

4. 在需要跳转的页面（首页和活动页）加上这段代码

1.1 首页

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

1.2 活动页

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

到此自定义tabBar就完成了，欢迎大家学习交流。