The method of developing the Navigation column at the bottom of WeChat Mini Programs
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.
