Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how WeChat Mini Programs sets up the bottom navigation column. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

WeChat Mini Programs's method of setting the bottom Navigation column

Let's take a look at an effect picture first.

Here, we added three navigation icons, because we have three pages, Mini Program can add up to 5.

So how did they appear and how did they color it? It's done in two steps!

1. Icon preparation

We go to the website, mouse over a favorite icon and click the download button below.

Select two different color icons in the pop-up box and choose the 64px size. I choose png and download it with an alias.

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

two。 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": "Home"}, {"selectedIconPath": "images/221.png" "iconPath": "images/22.png", "pagePath": "pages/logs/logs", "text": "log"}, {"selectedIconPath": "images/331.png", "iconPath": "images/33.png", "pagePath": "pages/test/test", "text": "Happy Test"}]}

Explain the corresponding attribute information.

TabBar refers to the bottom navigation configuration properties when color is not selected, the color of the bottom navigation text when selectedColor is selected, the color of the bottom navigation text borderStyle the sample 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 frame) list navigation configuration array selectedIconPath when icon path iconPath is not selected icon path pagePath page access Address text navigation icon below the text above is all the content of the article "how to set the bottom navigation column of WeChat Mini Programs" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.