Examples of WeChat mini-program tabBar usage, mini-program tabbar

Examples of small program tabBar usage, small program tabbar

This example describes how to use the tabBar applet. We will share this with you for your reference. The details are as follows:

1. Effect display

2. Principles: Configure the tabBar attribute in app. json.

{"Pages": ["index", "picDisplay"], "window": {"navigationBarBackgroundColor": "# ffffff", "navigationBarTextStyle": "black ", "navigationBarTitleText": "Homepage", "backgroundColor": "# eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false}, "tabBar ": {"color": "#666666", "selectedColor": "#06bd04", "list": [{"pagePath": "index", "text ": "Homepage", "iconPath": "images/index.png", "selectedIconPath": "images/indexHL.png" },{ "pagePath": "picDisplay", "text ": "image display", "iconPath": "images/picDisplay.png", "selectedIconPath": "images/picDisplayHL.png"}]}

3. key code

"TabBar": {"color": "#666666", "selectedColor": "#06bd04", "list": [{"pagePath": "index ", "text": "Homepage", "iconPath": "images/index.png", "selectedIconPath": "images/indexHL.png" },{ "pagePath": "picDisplay ", "text": "image display", "iconPath": "images/picDisplay.png", "selectedIconPath": "images/picDisplayHL.png"}]}

4. Operation Method

Create a new project, open the app. json file, and copy the key code to "window" :{}. Note that a comma is added before the braces of window, as shown in figure

Configure the attribute value of tabBar

"TabBar": {// set the default color of tabBar text "color": "#666666", // set the color of the selected tabBar text "selectedColor": "#06bd04 ", // tab list, array type. To change to an array, there must be at least two but no more than five tab objects "list": [{// set the tab jump Page Link "pagePath ": "index", // set the text on the tab "text": "Homepage", // set the default icon on the tab "iconPath": "images/index.png ", // set the "selectedIconPath": "images/indexHL.png" },{ "pagePath": "picDisplay", "text": "image display ", "iconPath": "images/picDisplay.png", "selectedIconPath": "images/picDisplayHL.png"}]}

5 common attributes and configurations of tabBar:

1) color: No font color is selected.

2) selectedColor: select the font color

3) borderStyle: the color white of the top line of tabbar (only white and black are supported)

4) backgroundColor: tabbar background color

5) list: sets the rab list items (at least 2 and at most 5 tabs ).

In addition, list is an array attribute, and each item is an object. You can set four attributes for list:

① Text: Set the text on the tab

② IconPath: Set the image path displayed when the tab is inactive.

③ SelectedIconPath: sets the image path when the tab is active (both the iconPath and selectedIconPath have a size limit of 40 KB)

④ PagePath: Set the jump page path when you press tab (this page must be configured in pages)

5. Complete instance codeClick hereDownload from this site.

In addition, the applet development software is as follows:

Https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html? T = 201714

I hope this article will help you develop small programs.