关于自定义TabBar及不同身份切换Tabbar

如何对微信小程序的tabbar进行自定义？

1. 在 根目录 下创建 custom-tab-bar 文件夹

• less文件是由于我使用了easyWXLess插件 ，感兴趣的同学可以自行了解

2. tabbar页面路径须在app.json文件中tabBar字段内配置(tabbar最小2个，最大5个)

• “custom”：true，
• “list”:[{},{},{},...]

根据不同身份切换不同tabbar？

1. 通过 isClientVersion 字段判断 用户版/商家版 控制tabbar列表的切换 上代码：

• index.wxml

<!-- wxml -->
<view class="tab-bar" wx:if="{{showTabBar}}">
  <view class="tab-bar-border"></view>
  <view 
    wx:for="{{isClientVersion?clientList:shopList}}" 
    wx:key="index" 
    class="tab-bar-item" 
    data-path="{{item.pagePath}}" 
    data-selectedPath="{{item.selectedIconPath}}" 
    data-index="{{index}}" 
    bindtap="switchTab"
  >
    <image 
      class="cover-image" 
      src="{{selected === index ? item.selectedIconPath : item.iconPath}}">
    </image>
    <view 
      class="cover-view" 
      style="color: {{selected === index ? selectedColor : color}}">
      {{item.text}}
    </view>
  </view>
</view>

• index.js

<!-- js -->
var app =  getApp();
Component({
  data: {
    showTabBar:true,
    selected: 0, // 选中的tab下标
    color: "#000D1F 85%",
    selectedColor: "#000D1F 85%",
    isClientVersion:app.globalData.isClientVersion,
    // 用户版本tab-bar列表
    clientList: [{
      pagePath: "/pages/index/index",
      // pagePath: "/pages/mainIndex/mainIndex",
      iconPath: "/assets/tabBar/order-nor@3x.png",
      selectedIconPath: "/assets/tabBar/order-press@3x.png",
      text: "预约"
    },
    {
      pagePath: "/pages/message/message",
      iconPath: "/assets/tabBar/my-nor@3x.png",
      selectedIconPath: "/assets/tabBar/my-press@3x.png",
      text: "我的"
    }],
    // 商家版本tab-bar列表
    shopList: [{
      pagePath: "/pages/managementServiceList/managementServiceList",
      iconPath: "/assets/tabBar/order-nor@3x.png",
      selectedIconPath: "/assets/tabBar/order-press@3x.png",
      text: "服务列表"
    },
    {
      pagePath: "/pages/message/message",
      iconPath: "/assets/tabBar/my-nor@3x.png",
      selectedIconPath: "/assets/tabBar/my-press@3x.png",
      text: "我的"
    }],
    realList:[]
  },
  // 组件生命周期
  lifetimes:{
    // 组件实例进入到节点树
    attached(){
      // 根据app.globalData.isClientVersion判断isClientVersion版本，选择不同list
      this.setData({
        isClientVersion:app.globalData.isClientVersion,
      })
    }
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
    }
  }
})

• tabbar页面 关键 代码：

// --- /pages/index/index 页面中onShow(){},设置选中下标为0
onShow(){
 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0,    // 根据tab的索引值设置
    }) 
  }
}

// --- /pages/message/message 页面中onShow(){},设置选中下标为1
onShow(){
 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
   this.getTabBar().setData({
     selected: 1    // 根据tab的索引值设置
  })
}

// --- /pages/managementServiceList/managementServiceList 页面中onShow(){},设置选中下标为 0
onShow(){
 app.globalData.isClientVersion = false
 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
   this.getTabBar().setData({
     selected: 0,    // 根据tab的索引值设置
     // 设置isClientVersion值，变更tabBar页面列表，此处设置isClientVersion值不变，图标不及时变化
     isClientVersion:app.globalData.isClientVersion
   }) 
 }
}

• index.json

{
  "component": true
}

• index.wxss

<!-- wxss -->
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
  background-color: white;
  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 .cover-image {
  width: 27px;
  height: 27px;
}
.tab-bar-item .cover-view {
  font-size: 10px;
}

不足之处欢迎提出修改建议及指正！