• In order to ensure thatLow version compatibility and distinguishing which pages are TAB pagesTabBar configuration items need to be fully declared, but these fields do not apply to custom tabBar rendering.
  • The developer is required to provide a custom component to render the tabBar. All tabBar styles are rendered by this custom component. The cover-view + Cover -image component with fixed at the bottom is recommended to keep the tabBar hierarchy relatively high.
  • Interfaces associated with tabBar styles, such as wx.settabBarItem, are disabled.
  • The custom tabBar component instance under each TAB page is different, can be customized under the componentgetTabBarInterface to get a custom tabBar component instance of the current page

1. Create a custom tabbar component custom-tab-bar in the root directory

custom-tab-bar/index.js
Component({
  data: {
    selected: 0.color: "#7A7E83".selectedColor: "#3cc51f".list: [{
      pagePath: "/pages/main/index/index".iconPath: "/image/icon_component.png".selectedIconPath: "/image/icon_component_HL.png".text: "Component"
    }, {
      pagePath: "/pages/main/tab/tab".iconPath: "/image/icon_API.png".selectedIconPath: "/image/icon_API_HL.png".text: "Interface"
    }]
  },
  attached () {
  },
  methods: {
    switchTab (e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({ selected: data.index })
    }
  }
})
Copy the code
custom-tab-bar/index.json
{
  "component": true
}
Copy the code
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>
Copy the code
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;
}

Copy the code

2. Change the Tabbar status on the TAB page

Need to be used in life cycle onShow because tabbar state needs to change with each page switch

if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  this.getTabBar().setData({ selected: 1})}Copy the code

3. Configure in the app.json file

  • inapp.jsonIn thetabBarSpecified in itemcustomField, while the resttabBarRelated configurations are complete.
  • All TAB pages must be declared in JSONusingComponentsTerm, can also be inapp.jsonEnable globally.
"tabBar": {
    "custom": true."color": "# 000000"."selectedColor": "# 000000"."backgroundColor": "# 000000"."list": [{
      "pagePath": "pages/main/index/index"."iconPath": "/image/icon_component.png"."selectedIconPath": "/image/icon_component_HL.png"."text": "Component"
    }, {
      "pagePath": "pages/main/tab/tab"."iconPath": "/image/icon_API.png"."selectedIconPath": "/image/icon_API_HL.png"."text": "Interface"
    }]
Copy the code