WeChat applet tab usage and organization

1. WeChat applet comes with tab function

At present, the WeChat applet comes with a multi-tab function, which is easy to use, mainly adding configuration in app.json in the configuration file.

tabBar

If the applet is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), you can specify the performance of the tab bar and the corresponding page displayed when the tab is switched through the tabBar configuration item.

Tip：

1. When the position is set to top, the icon will not be displayed
2. The list in the tabBar is an array, and only a minimum of 2 and a maximum of 5 tabs can be configured , and the tabs are sorted in the order of the array.

Property description:

Attributes	Types of	Required	Defaults	describe
color	HexColor	Yes		Default color of text on tabs
selectedColor	HexColor	Yes		The color of the text on the tab when it is selected
backgroundColor	HexColor	Yes		background color of the tab
borderStyle	String	no	black	The color of the border on the tabbar, only black/white is supported
list	Array	Yes		The list of tabs, see the list attribute description for details, at least 2 and at most 5 tabs
position	String	no	bottom	Optional values ​​bottom, top

where list accepts an array, and each item in the array is an object with the following property values:

Attributes	Types of	Required	illustrate
pagePath	String	Yes	The page path, which must be defined first in pages
text	String	Yes	button text on tab
iconPath	String	no	The image path, the icon size is limited to 40kb, the recommended size is 81px * 81px, when the postion is top, this parameter is invalid, and network images are not supported
selectedIconPath	String	no	The image path when selected, the icon size is limited to 40kb, the recommended size is 81px * 81px, when the postion is top, this parameter is invalid

 2. Example 1, use of header tab

The tabBar configuration is as follows:

"tabBar": {
    "color": "black",
    "selectedColor": "red",
    "backgroundColor": "orange",
    "position": "top",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/movable/movable",
        "text": "移动测试"
      },
      {
        "pagePath": "pages/apptest/apptest",
        "text": "其他应用"
      }
    ]
  }

Show results:

3. Example 2, the bottom tab is used

The tabBar configuration is as follows:

 "tabBar": {
    "color": "gray",
    "selectedColor": "red",
    "backgroundColor": "orange",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "style/img/home_gray.png",
        "selectedIconPath": "style/img/home_red.png"
      },
      {
        "text": "个人中心",
        "pagePath": "pages/apptest/apptest",
        "iconPath": "style/img/person_gray.png",
        "selectedIconPath": "style/img/person_red.png"
      },
      {
        "text": "推广名片",
        "pagePath": "pages/card/card",
        "iconPath": "style/img/card_gray.png",
        "selectedIconPath": "style/img/card_red.png"
      }
    ]
  }

Show results:

 

More:

Open other applets and jump between applets in WeChat applet

http://ad.jnqianle.cn/ad/11.html

http://www.jnqianle.cn/Mina/Index