WeChat applet 4 (set bottom navigation)

Okay, the header title of the applet is set, let's talk about how the bottom navigation bar is implemented.

Let's take a look at the effect diagram first

Here, we added three navigation icons, because we have three pages, and the WeChat applet can add up to 5.

So how did they appear and how were they colored? Done in two steps!

1. Icon preparation

Ali icon library   http://www.iconfont.cn/collections/show/29

We enter the website, slide the mouse over a favorite icon and click the download button below

Select two icons of different colors in the pop-up box, select 64px size, I chose png and then download it and use it as an alias 

Save the above named icon to the newly created images folder in the applet project directory, and the preparation is done

2. Change the configuration file

We find the configuration file app.json in the project root directory and add the following configuration information

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle":"white",
    "list": [{
      "selectedIconPath": "images/111.png",
      "iconPath": "images/11.png",
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "selectedIconPath": "images/221.png",
      "iconPath": "images/22.png",
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }, {
      "selectedIconPath": "images/331.png",
      "iconPath": "images/33.png",
      "pagePath": "pages/test/test",
      "text": "Happy Test"
    }]
  },

Explain the corresponding attribute information

tabBar  refers to the navigation configuration properties at the bottom

The color  of the bottom nav text when color is not selected

 The color of the bottom nav text when selectedColor is selected

borderStyle  The color of the bottom navigation border (note that if no style is written here , the default light gray line will appear on the top border of the navigation box )

list   navigation configuration array

icon path when selectedIconPath is selected

icon path when iconPath is not selected

pagePath page access address

text text  below the navigation icon

If you want to change the more detailed style, please refer to

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

Well, save the compilation and you can see the above effect.