微信小程序自定义tabbar组件

由于项目需求，必须自己写组件：

微信官方文档：查看（https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html）

第一步，在App.json中配置tabBar,自定也组件也必须配置，配置 "custom": true，list里配置所有的tabbar页面。

  "tabBar": {
    "custom": true,
    "color": "red",
    "selectedColor": "#3b81d7",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "pages/Role/InsureIndex/index",
      "text": "首页"
    }, {
      "pagePath": "pages/Role/MineIndex/index",
      "text": "首页"
    }, {
      "pagePath": "pages/index/userInfo/userInfo",
      "text": "我的"
    }]
  },

第二步：在pages的同级目录新建组件，文件夹名字：custom-tab-bar，自定义组件文件名为index。组件代码如下，应该都能看懂。

index.js

Component({
  properties: {},

  data: {
    indexImg: "../static/images/tabBar/tab_icon_home_nor@2x.png",
    indexSelectImg: "../static/images/tabBar/tab_icon_home_sel@2x.png",
    aboutUsImg: "../static/images/tabBar/tab_icon_user_nor@2x.png",
    aboutUsSelectImg: "../static/images/tabBar/tab_icon_user_sel@2x.png",
    _tabbat: null,
    iPhoneX: false,
    urls: ['/pages/Role/InsureIndex/index',
      '/pages/index/userInfo/userInfo'
    ]
  },
  attached() {
    var self = this
    wx.getSystemInfo({
      success(res) {
        console.log(res.model)
        if (res.model.indexOf('iPhone X') >= 0) {
          self.setData({
            iPhoneX: true
          })
        }
      }
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    switchTap: function (e) {
      var self = this
      var index = e.currentTarget.dataset.index;
      var urls = self.data.urls
      wx.switchTab({
        url: urls[index],
      })
    }
  }
})

index.wxml

<div class="_tabbar {{iPhoneX?'_iPhoneX':''}}">
  <div class="titem {{_tabbat==0?'tCdk':''}}" data-index="0" bind:tap="switchTap">
    <image src="{{_tabbat==0?indexSelectImg:indexImg}}" />
    <b>首页</b>
  </div>
  <div class="titem {{_tabbat==1?'tCdk':''}}" data-index="1" bind:tap="switchTap">
    <image src="{{_tabbat==1?aboutUsSelectImg:aboutUsImg}}" />
    <b>我的</b>
  </div>
</div>

index.wxss

._tabbar {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  background: #fff;
  font-size: 26rpx;
  color: #999999;
  box-shadow: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13);
}

._tabbar .titem {
  text-align: center;
  width: 50%;
}

._tabbar .titem image {
  display: block;
  margin: auto;
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 10rpx;
}

._tabbar .tCdk {
  color: #37ADFE;
}

._iPhoneX {
  height: 148rpx;
}

index.json

{
  "component": true,
  "usingComponents": {}
}

以上为组件代码，点击tabbar跳转页面时，会重新加载tabbar组件，导致选中样式一直是默认的，因此需要在用到tabbar的页面的js文件中做如下操作：（以 “首页” 为例）

  onShow: function () {
    this.getTabBar().setData({
      _tabbat: 0
    })
  },

以上就已经完成了，但是看网上大家说会出现两个tabBar,我这边是没出现（一个自定义，一个自带的），如果出现的话，在app.js中的onLaunch函数中加入 wx.hideTabBar() ， 隐藏自带的tabbar就可以了。