WeChat applet setting bottom navigation column method

I wanted to have a beautiful navigation column at the bottom of the WeChat applet, but I didn’t know how to make it, so Baidu found this article and shared it with everyone.

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

For more WeChat Mini Program tutorials, please scan the QR code to follow: H5 Developer Community

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