How to Use Vant Weapp Tabbar in WeChat Mini Programs

Vant Weapp is a UI component library provided by Youzan for WeChat Mini Programs, enabling developers to create more beautiful interfaces. Recently, while developing the IPRSS Mini Program, I encountered several challenges with the WeChat custom Tabbar and would like to share my experience and solutions.

Scenario

I did not use the native WeChat Tabbar functionality. Instead, I combined the Vant Weapp Tabbar component with the WeChat custom Tabbar.

Code Examples

According to the official WeChat Mini Program documentation, you must first modify the tabBar item in app.json to set the custom field to true, and complete the remaining Tabbar configurations. The code is as follows:

"tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "My"
      },
      {
        "pagePath": "pages/query/query",
        "text": "IP Query"
      },
      {
        "pagePath": "pages/ipv6/ipv6",
        "text": "IPv6 Check"
      },
      {
        "pagePath": "pages/about/index",
        "text": "About Us"
      }
    ]
  }

Since we are using the Vant Weapp Tabbar, we also need to register the component in app.json:

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

Next, create a folder named custom-tab-bar in the root directory of the Mini Program. This name is fixed by WeChat. Inside this folder, create a component named index. The directory structure is shown below:

In custom-tab-bar/index.wxml, write the Vant Weapp Tabbar code:

<view>
  <van-tabbar active="{{ active }}" bind:change="onChange">
    <van-tabbar-item icon="home-o" data-page="home" data-target="/pages/index/index">
      My
    </van-tabbar-item>
    <van-tabbar-item icon="search" data-page="query" data-target="/pages/query/query">
      IP Query
    </van-tabbar-item>
    <van-tabbar-item icon="location-o" data-page="ipv6" data-target="/pages/ipv6/ipv6">
      IPv6 Check
    </van-tabbar-item>
    <van-tabbar-item icon="info-o" data-page="about" data-target="/pages/batch/query">
      About Us
    </van-tabbar-item>
  </van-tabbar>
</view>

Then, modify the custom-tab-bar/index.js file. Add the following code within the methods object:

onChange(event) {
      // event.detail contains the index of the currently selected item
      var that = this
      switch (event.detail) {
        case 0:
          wx.switchTab({
            url: '/pages/index/index'
          })
          break
        case 1:
          wx.switchTab({
            url: '/pages/query/query'
          })
          break;
        case 2:
          wx.switchTab({
            url: '/pages/ipv6/ipv6'
          })
          break;
        case 3:
          wx.switchTab({
            url: '/pages/about/index'
          })
          break;
        default:
          break;
      }
    },
    init(active){
      this.setData({active:active})
    }

The code above introduces two functions: onChange and init.

• onChange: Called when the user clicks a Tabbar item; it triggers the WeChat built-in function wx.switchTab() to switch tabs.
• init: Updates the active property to inform the Tabbar which tab was clicked.

Finally, modify the pages/xxx/xxx.js file for each page associated with the Tabbar. Call the init() method within the onShow lifecycle function:

/**
   * Lifecycle function -- listen for page display
   */
onShow() {
    this.getTabBar().init(3)
  },

The number 3 indicates the index of the current page in the Tabbar (starting from 0), as shown in the image below:

This completes the integration of Vant Weapp's Tabbar with the WeChat Mini Program custom Tabbar. You can scan the QR code below to view the IPRSS Mini Program in action.

Additional Notes

This method may not be highly flexible; if the order of Tabbar pages changes, you will need to manually update the init call. For more flexible solutions, refer to the methods provided by the developer here: https://github.com/youzan/vant-weapp/issues/3992.

The following WeChat built-in functions were used above. Refer to the official documentation:

• Custom TabBar
• wx.switchTab(Object object)