微信小程序tabBar开启custom，小程序自定义tabbar组件

微信小程序tabBar开启custom，自定义tabbar组件

小程序自带的tabBar样式，选中样式时：只能更改图标和文字的颜色。现在我需要选中时，当前选中的标签背景色变为红色，好像自带的并不能满足，因此琢磨了一下自定义组件。小程序自带的tabBar是在app.json里配置，可参考官网（https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html）

如下图是我要的tabBar效果：

实现过程

1、在app.json文件中声明tabbar，并设置custom:true （开启自定义主键），另外我是直接在此全局声明usingComponents，引入自定义tabbar组件(customtabbar)。

虽然已经自定义tabbar组件了，但是还要在app.json中还要配置完整的backgroundColor、selectedColor等。此时配置的backgroundColor等并不会渲染到自定义组件，但是还会要配置

"tabBar": {
    "custom": true,
    "backgroundColor": "#ffffff",
    "color": "#999",
    "selectedColor": "#d43a3c",
    "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "images/1-2.png",
        "selectedIconPath": "images/1-1.png",
        "text": "首页"
      },{
        "pagePath": "pages/approval/approval",
        "iconPath": "images/2-2.png",
        "selectedIconPath": "images/2-1.png",
        "text": "审批"
      },{
        "pagePath": "pages/search/search",
        "iconPath": "images/3-2.png",
        "selectedIconPath": "images/3-1.png",
        "text": "查询"
      },{
        "pagePath": "pages/manage/manage",
        "iconPath": "images/4-2.png",
        "selectedIconPath": "images/4-1.png",
        "text": "管理"
      },{
        "pagePath": "pages/user/user",
        "iconPath": "images/5-2.png",
        "selectedIconPath": "images/5-1.png",
        "text": "我的"
      }]
  },
  "usingComponents": {
    "customtabbar": "custom-tab-bar/index"
  }

2、写自定义组件，注意：要在pages同级目录下新建组件文件夹文件夹名字：custom-tab-bar，自定义组件文件名为index，如下图。

在网上看到一篇文章，是说自定义组件的文件夹必须在pages同级，因为index.js中配置的tabbar的list项的路径必须是pages下的一级目录，此外文章有说到组件里的命名必须用index。至于原因我也不清楚。大家可以试一下，我前面写的组件出不来，后面采用这种方式就出来了，我不确定是不是这个原因还是别的原因导致的。

3、自定义组件index.wxml

currentTab 为当前tabbar选中下标
data-url="{{item.pagePath}}" 将tabbar对应的页面路径

<view class="nav-tabs">
  <view class="tab-list {{currentTab == idx ? 'active' : 'default' }}" wx:for="{{items}}" wx:key="prototype" wx:for-index="idx" wx:for-item="item" data-current="{{idx}}" data-url="{{item.pagePath}}" bindtap="swichNav">
    <text class="tab-text" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}">{{item.text}}</text>
    <image class="iconPath" wx:for-index="idx" data-current="{{idx}}" src="{{currentTab == idx ? item.selectedIconPath : item.iconPath }}"></image>
  </view>
</view>

4、自定义组件index.js

配置的路径要是同级下的第一级目录，，百度到的资料是说只能第一级，第二级会出错，我没有试。

 data: {
    currentTab: 0,    // 默认首页为选中页面
    "backgroundColor": "#ffffff",
    "selectedColor": "#d43a3c",
    items: [
      {
        "pagePath": "/pages/index/index", 
        "iconPath": "/images/1-1.png",
        "selectedIconPath": "/images/1-2.png",
        "text": "首页"
      },
      {
        "pagePath": "/pages/approval/approval",
        "iconPath": "/images/2-1.png",
        "selectedIconPath": "/images/2-2.png",
        "text": "审批"
      },
      {
        "pagePath": "/pages/search/search",
        "iconPath": "/images/3-1.png",
        "selectedIconPath": "/images/3-2.png",
        "text": "查询"
      },
      {
        "pagePath": "/pages/manage/manage",
        "iconPath": "/images/4-1.png",
        "selectedIconPath": "/images/4-2.png",
        "text": "管理"
      },
      {
        "pagePath": "/pages/user/user",
        "iconPath": "/images/5-1.png",
        "selectedIconPath": "/images/5-2.png",
        "text": "我的"
      }
    ]
  },

  swichNav: function (e) {
    let that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({    
        currentTab: e.target.dataset.current
      })
      let url = e.currentTarget.dataset.url;  // 点击tabbar时，跳转对应的页面
      wx.switchTab({
        url: url,
      })
    }
  },

5、我的index.wxss

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-tabs {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
}

.tab-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  background: #fcfcfc;
  height: 120rpx;

}

.tab-text {
  font-size: 24rpx;
  line-height: 35rpx;
  color: #5f5f5f;
}

.iconPath {
  width:54rpx;
  height: 54rpx;
}

.tab-content {
  flex: 1;
}

.default {
  line-height: 75rpx;
  text-align: center;
  flex: 1;
  color: #eee;
  font-weight: bold;
  font-size: 28rpx;
}

.active {
  line-height: 75rpx;
  text-align: center;
  background-color: #d43a3c;
  flex: 1;
  font-weight: bold;
  font-size: 28rpx;
}
.active .tab-text {
  color: #fff;
}

.show {
  display: block;
  flex: 1;
}

.hidden {
  display: none;
  flex: 1;
}

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

对于this.getTabBar()官网有介绍（https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html）

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        currentTab: 2  //数字是当前页面在tabbar的索引,如我的查询页索引是2，因此这边为2，同理首页就为0，审批页面为1
      })
    }
  },

7、此时组件自定义完毕，但是页面会出现两个tabbar，一个自定义，一个自带的，此时在app.js中的onLaunch函数中加入 wx.hideTabBar() ， 隐藏自带的tabbar。即可实现开头的效果。

文章声明：此文章有部分借鉴网络上的例子，加以修改成我的需求，如若觉得相似，可联系我删稿，谢谢。