Tabbar shows the number of shopping carts-some pits of custom tabbar in WeChat applet

The effect is shown in the figure, using the native method to add the number of shopping carts to the tabbar.

View the custom tabbar of the WeChat document here

It is recommended to preview the effect in Developer Tools

First add the configuration to the tabBar item in app.json: "custom": true

Then add "usingComponents": {}

In addition to other configurations, this is my app.json available for reference

{
  "pages": [
    "pages/index/index",
    "pages/category/index",
    "pages/shoppingCar/index",
    "pages/my/index",
    "pages/goodlist/goodlist",
    "pages/search/index",
    "pages/goodsdetail/index",
    "pages/orderconfirm/index",
    "pages/authorize/index"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#ff2d4a",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  },
  "tabBar":{
    "custom": true,
     "color": "#7A7E83",
    "selectedColor": "#ff0000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./images/[email protected]",
        "selectedIconPath": "./images/[email protected]"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分页",
        "iconPath": "./images/[email protected]",
        "selectedIconPath": "./images/[email protected]"
      },
      {
        "pagePath": "pages/shoppingCar/index",
        "text": "购物车",
        "iconPath": "./images/[email protected]",
        "selectedIconPath": "./images/[email protected]"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "./images/[email protected]",
        "selectedIconPath": "./images/[email protected]"
      }
    ]
  },
  "usingComponents": {},
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Next, create a custom-tab-bar folder in the root directory (or test all the code in the example)

First complete the corresponding configuration of the page and the button so that the tabbar can click to jump

Change the custom-tab-bar first list configuration in index.js as follows (corresponding to app.json)

Note Note that the path can not write here ./but to the root directory /otherwise it will error

Component({
 
  data: {
    selected: 1,
    color: "#7A7E83",
    selectedColor: "#ff0000",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "/images/[email protected]",
        selectedIconPath: "/images/[email protected]"
      },
      {
        pagePath: "/pages/category/index",
        text: "分页",
        iconPath: "/images/[email protected]",
        selectedIconPath: "/images/[email protected]"
      },
      {
        pagePath: "/pages/shoppingCar/index",
        text: "购物车",
        iconPath: "/images/[email protected]",
        selectedIconPath: "/images/[email protected]"
      },
      {
        pagePath: "/pages/my/index",
        text: "我的",
        iconPath: "/images/[email protected]",
        selectedIconPath: "/images/[email protected]"
      }
    ],
    shopping_count: (wx.getStorageSync('shopping_car') || [] ).length
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
  

})

Next write the following code on each corresponding page

Where selected is the index value, and the configuration of the custom tabbar is now complete

onShow() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  }

Next, add an icon to the shopping cart

<!--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>
      <!-- 修改这行代码，其中index表示索引（我的购物车在第三个图标，索引为2） -->
     <cover-view class="shoppingCircle" wx:if="{{index === 2}}">{{shopping_count}}</cover-view>
  </cover-view>
</cover-view>

Set the shopping_count variable in the js file as follows

shopping_count: (wx.getStorageSync('shopping_car') || [] ).length

Then modify the content in css to make the page show the expected effect

Finally, define a function in the onShow on the shoppingcar page so that when you click back after the operation, you can change the displayed number

if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2
      })
    }