Customize bottom navigation of WeChat applet (available on official website)

WeChat applet development document explanation supplement

Official document link: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1. Preview the developer tools at the bottom of the current page of the development documentation;
2. Find the component'custom-tab-bar' and put it in your own applet, note that it is the root directory ;
3. Add to the tabbar in the app.json of the applet: "custom": true (the system will automatically find the component just added);
4. Add in the click event of the component:

APP.selected_tab_id = e.currentTarget.dataset.index

( This step is to assign the clicked index value to a global variable, which is convenient for other pages to refer to, pay attention to the declaration of APP)

6. Add in onShow of all pages that use custom bottom navigation :

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

(Common to all pages, directly use the global variables defined above)

Hope that helps, thanks for watching