Development of WeChat Mini Programs---Introduction to tabBar

Table of contents

1. Introduction to tabBar

2. 6 components of tabBar

3. Configuration items of tabBar node

4. Configuration options of tab items

5. Use of tabBar

---

1. Introduction to tabBar

TabBar is a common page effect in mobile applications and is used to quickly switch between multiple pages. Mini programs are usually divided into:

(1) Bottom tabBar

(2)Top tabBar

Notice:

(1) Only a minimum of 2 and a maximum of 5 tabs can be configured in the tabBar.

(2) When rendering the top tabBar, the icon is not displayed (that is, the so-called icon will not appear), only the text is displayed.

2. 6 components of tabBar

backgroundColor： tabBar的背景颜色
selectedIconPath：选中时的图片路径
borderStyle：     tabBar上边框的颜色
iconPath：        未选中时的图片路径
selectedColor：   tab上的文字选中的颜色
color：           tab上文字的默认（未选中）的颜色

3. Configuration items of tabBar node

属性              类型      必填   默认值    说明  
position         String      否    bottom   tabBar的位置，仅支持bottom/top
borderStyle      String      否    black    tabBar上边框的颜色，仅支持black/white
color            HexColor    否             tab上文字的默认（未选中）颜色
selectedColor    HexColor    否             tab上的文字选中时的颜色 
backgroundColor  HexColor    否             tabBar的背景色
list             Array       是             tab页签的列表，最少2个，最多5个

4. Configuration options of tab items

属性                类型    必填    说明
pagePath           String    是   页面路径，页面必须在pages中预先定义
text               String    是   tab上显示的文字
iconPath           String    否   未选中时的图标路径；当position为top时，不显示icon
selectedIconPath   String    否   选中时的图标路径；当position为top时，不显示icon

5. Use of tabBar

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页面"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息"
      }
    ]
  },