Tabbar configuration at the bottom of wechat applet

What is? tabBar

tabBar It is usually used to realize the fast switching of multiple pages , There is usually a bottom tabBar And the top tabBar.tabBar You can only configure at least 2 individual , most 5 individual tab label ; Render top tabBar when , No display icon Icon , Show only text

tabBar Configuration item of node

attribute	type	Must write	describe
list	String	yes	tabBar Tab list ( least 2 individual , most 5 individual )
pagePath	String	yes	Page path , The page must be in pages Predefined in
text	String	yes	tabBar Text displayed on
iconPath	String	no	The size of the picture when it is not selected
selectedIconPath	String	no	The size of the picture when selected
color	HexColor	no	tab The color of the unselected text on
selectedColor	HexColor	no	tab The color of the selected text on
backgroundColor	HexColor	no	tabBar Background color
borderStyle	String	no	tabBar Top border color ( Support only black/white)
position	String	no	tabBar The location of ( Support only bottom/top)

To configure tabBar Steps for options

1. newly added tabBar node

open app.json The configuration file , In the and windows New under level tabBar node

2. newly added list Array

tabBar In nodes , newly added list Array , This array holds each tab The configuration object of the item , The properties contained in the object are as follows ：

pagrPath： Specify the current tab Corresponding page path
text： Specify the current tab The text of the button on the
iconPath： Specify the current tab Picture path when not selected
selectedIconPath： Specify the current tab Image path when selected

Icons can go to Ali Icon Library Download

3. change tabBar The color when the upper text is selected

In addition, you can also set other attributes according to your own needs