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

This article mainly introduces the relevant knowledge of "the method of developing the navigation column at the bottom of WeChat Mini Programs". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope that this article "the method of developing the navigation column at the bottom of WeChat Mini Programs" can help you solve the problem.

Development of WeChat Mini Programs's bottom Navigation column

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

Here, we added three navigation icons, because we have three pages, WeChat Mini Programs 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

Enter 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 navigation configuration properties at the bottom

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

The color of the bottom navigation text when selectedColor is selected

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

List navigation configuration array

Icon path when selectedIconPath is selected

Icon path when iconPath is not selected

PagePath page access address

Text below the text navigation icon

This is the end of the content about "the method of developing the navigation column at the bottom of WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.