WeChat applet custom tabBar step record

1. Introduction

Many times, the tabBar that comes with the mini program cannot meet the project requirements, so we need to customize the tabBar. But after searching for a long time on the Internet, most of the problems I found were flickering when switching. Fortunately, starting from the base library 2.5.0, you can officially use custom tabBar.

2. Customize tabBar style

As shown in the figure below, we need a tabBar that displays "Home", "My", and a page that can be clicked to jump to the release. This style, the native one cannot meet the needs, so you can only customize the tabBar.

3. Introduce custom-tab-bar and related configuration

3.1. As shown in the figure below, import custom-tab-bar [Download] into the project root directory.

3.2. Configure the switching tabbar in app.json and set "custom": true, then set the base library to 2.5.0

3.3. Use custom TabBar and add the following code in onShow of the switched TabBar interface. For example, the home page sets selected: 0, and mine sets selected: 2. Because selected: 1 is a special jump, when you click the plus icon, it no longer switches the tabbar, but directly jumps to the publishing interface.

/**
   * Life cycle function--monitor page display*/
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      console.log('Set selected item 0')
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

4. Complete Demo

Real machine testing is available and it is very easy to use. 【Complete Demo download address】

Summarize

This is the end of this article about how to customize the tabBar of WeChat Mini Program. For more relevant content about customizing the tabBar of Mini Program, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!