Home > Article > WeChat Applet > Development of bottom navigation column of WeChat mini program (with code)
This article mainly introduces the relevant information on the development of the Navigation column at the bottom of the WeChat Mini Program (with code). I want to have a beautiful navigation column at the bottom of the WeChat Mini Program, but I don’t know how to make it, so Baidu found this article and shared it with everyone. Friends who need it can refer to it
Development of the navigation column at the bottom of the WeChat applet
Let’s take a look at the renderings first
Here, we have added three navigation icons, because we have three pages, and the WeChat applet can add up to 5.
So how do they appear and how are they colored? Done in two steps!
1. Icon preparation
We enter the website, slide the mouse over an icon you like and click the download button
Select two icons of different colors in the pop-up box and select the size of 64px. I chose png and then download it and give it an alias
Save the above named icon to the newly created images folder in the mini program project directory, Preparation work is done
#2. Change the configuration file
We find the configuration file app in the project root directory. json 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": "开心测试" }] },
Explain the corresponding attributeinformation
tabBar refers Bottom navigation configuration properties
color The color of the bottom navigation text when not selected
selectedColor The color of the bottom navigation text when selected
borderStyle The sample color of the bottom navigation border (note here If no style is written, the default light gray line will appear on the upper border of the navigation box)
list Navigation configurationArray
selectedIconPath Icon path when selected
iconPath Icon path when not selected
pagePath Page access address
text Text below the navigation icon
Thank you for reading, I hope it can help everyone, thank you for your support of this site support!
The above is the detailed content of Development of bottom navigation column of WeChat mini program (with code). For more information, please follow other related articles on the PHP Chinese website!