Desarrollo de miniprogramas WeChat---Introducción a tabBar

Tabla de contenido

1. Introducción a la barra de pestañas

2. 6 componentes de tabBar

3. Elementos de configuración del nodo tabBar

4. Opciones de configuración de elementos de pestañas.

5. Uso de la barra de pestañas

---

1. Introducción a la barra de pestañas

TabBar es un efecto de página común en aplicaciones móviles y se utiliza para cambiar rápidamente entre varias páginas. Los mini programas suelen dividirse en:

(1) Pestaña inferiorBar

(2)Barra de pestañas superior

Aviso:

(1) Sólo se pueden configurar un mínimo de 2 y un máximo de 5 pestañas en la barra de pestañas.

(2) Al representar la barra de pestañas superior, el ícono no se muestra (es decir, el llamado ícono no aparecerá), solo se muestra el texto.

2. 6 componentes de tabBar

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

3. Elementos de configuración del nodo tabBar

属性              类型      必填   默认值    说明  
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. Opciones de configuración de elementos de pestañas.

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

5. Uso de la barra de pestañas

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