微信小程序自定义tabbar

适用场景:不同身份的用户登录时对应的底部tabbar不同

注意：最多5个！！！

一、在app.json 文件里写入

  "tabBar": {
    "custom": true, //这个必须有
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/index.png",
        "selectedIconPath": "images/index-select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/business/stock/stock",
        "iconPath": "images/stock.png",
        "selectedIconPath": "images/stock-select.png",
        "text": "库存"
      },
      {
        "pagePath": "pages/packges/packges",
        "iconPath": "images/package.png",
        "selectedIconPath": "images/package-select.png",
        "text": "包裹"
      },
      {
        "pagePath": "pages/distributor/record/record",
        "iconPath": "images/record.png",
        "selectedIconPath": "images/record-select.png",
        "text": "记录"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my-select.png",
        "text": "我的"
      }
    ]
  },

在项目的根目录下建立一个名为custom-tab-bar的文件夹，一定名为custom-tab-bar，在里面建立名为index的page，如图：

在custom-tab-bar里面的index.wxml下

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

wxss:

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: white;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20rpx;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 60rpx;
  height: 60rpx;
}

.tab-bar-item view {
  font-size: 24rpx;
}

json:

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

js:

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#dcdee1",
    selectedColor: "#ec5a61",
    list:app.globalData.list,
  },
  attached() {
    this.setData({
      list:app.globalData.list
    })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      let index = e.currentTarget.dataset.index
      let url =  e.currentTarget.dataset.path
      this.setData({ selected: index })
      wx.switchTab({ url })

    }
  }
})

在app.js里面：

  globalData: {
    [{
          pagePath: "/pages/index/index",
          iconPath: "/images/index.png",
          selectedIconPath: "/images/index-select.png",
          text: "首页"
        },{
          pagePath: "/pages/business/stock/stock",
          iconPath: "/images/stock.png",
          selectedIconPath: "/images/stock-select.png",
          text: "库存"
        },{
          pagePath: "/pages/packges/packges",
          iconPath: "/images/package.png",
          selectedIconPath: "/images/package-select.png",
          text: "包裹"
        },{
          pagePath: "/pages/distributor/record/record",
          iconPath: "/images/record.png",
          selectedIconPath: "/images/record-select.png",
          text: "记录"
        },{
          pagePath: "/pages/my/my",
          iconPath: "/images/my.png",
          selectedIconPath: "/images/my-select.png",
          text: "我的"
        }]
  },

这样就可以实现自定义的tabbar了，可能会出现图标闪动的bug，没办法，应该是微信的bug，如果是按照不用的身份来显示不同的tabbar的话，就在app.js里面，来进行操作就可以，比如if，switch，把对应的tabbar赋值给this.globalData.list，需要注意的是，你赋值的tabbar，一定要是app.json里的，不然的话也会出错，对了，差点忘记一个重要的事情！

在你tabbar的对应的页面里，比如我tabbar里面的第一个，如index页面

  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        list : app.globalData.list,
        selected: 0  //数字是当前页面在tabbar的索引,如我的首页索引是0，因此这边为0，同理库存页就为1，包裹页面为2
        
      })
    }
  },

懂了吗？不懂得话欢迎留言交流