微信小程序动态控制tabbar的数量，uniApp动态控制tabbar的数量

需求分析：

        小程序登录进来有2种身份，每种身份看到的页面不一样，而且tabbar的数量也不一样，这个时候就需要用到微信小程序的自定义tabbar， 自定义tabbar和原生tabbar在用户体验上差不多，几乎看不出有什么区别，废话不多说直接上代码

创建一个文件夹 custom-tab-bar，uniApp和微信小程序一样 放在项目根目录 （文件名不可更改）（如图所示）

如果是uniapp项目，代码也是wxml,wxss的语法， custom-tab-bar并不会被uniapp编译

在custom-tab-bar文件夹创建index.wxml  (小程序官方建议：使用cover-view把层级尽量提高)

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

在custom-tab-bar文件夹创建index.js

        通过改变list来更新tabbar的样式，以及数量

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/index/index1",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件1"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "组件2"
    },
    {
      pagePath: "/index/index3",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "组件3"
    }
  ]
  },
  show() {
      // 可以在这里控制显示
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
})

在custom-tab-bar文件夹创建index.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: 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 cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

在custom-tab-bar文件夹创建index.json

{
  "component": true
}

 

配置app.json

        重要提示：“app.json中tabbar的list属性往多的配置，我理解为初始化站位，例如 true的时候显示2个tab，false的时候显示3个tab，那么tabbar的list里面就要配置三个tab，然后在custom-tab-bar/index.js里面可以控制tab的显示数量”

{
  "pages":[
    "index/index",
    "index/index2",
    "index/index3"
  ],
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "index/index1",
        "text": "组件1"
      },
      {
        "pagePath": "index/index2",
        "text": "组件2"
      },
      {
        "pagePath": "index/index3",
        "text": "组件3"
      }
    ]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

页面配置

        我这里有index1,index2,index3,三个页面，分别在页面的onShow事件里面新增如下代码，

         selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index

        例如：上面的 index1页面是0， index2页面是1，index3页面是2

onShow(){
   if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        //selected 是当前页面 在 custom-tab-bar/index.js里面list配置的索引也就是index
        this.getTabBar().setData({
          selected: 2
        })
   }
}

欢迎大家留言讨论，如有问题私信我