Barra de pestañas de cambio rápido de varias páginas del subprograma WeChat

En el applet de WeChat, la barra de pestañas puede establecer un máximo de 5 etiquetas de pestañas y un mínimo de 2 etiquetas, que se dividen en la barra de pestañas inferior y la barra de pestañas superior. Al renderizar la barra de pestañas superior, no se muestra ningún icono;

6 componentes de tabBar

1. backgroundColor: el color de fondo de la barra de pestañas

2. selectedIconPath: la ruta de la imagen cuando se selecciona

3. borderStyle: el color del borde en la barra de pestañas

4. iconPath: la ruta de la imagen cuando no está seleccionada

5. selectedColor: el color del texto en la pestaña cuando se selecciona

6. Color: el color predeterminado (no seleccionado) del texto en la pestaña

Cómo configurar tabBar:

En app.json, está al mismo nivel que el nodo de Windows, más el nodo tabBar, que contiene una colección de listas, que contiene pagePath y texto, donde pagePath representa la página que se muestra cuando se hace clic en la página de pestañas y se puede copiar y pegado directamente en el nodo Páginas. El texto representa el texto de la página de pestañas.

en aplicación.json

"tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/修改密码.png",
      "selectedIconPath": "/images/选择角色.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/样式.png",
      "selectedIconPath": "/images/样式设置.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/firsttab.png",
      "selectedIconPath": "/images/firsttab-active.png"
    }
  ]
  },

Cree tres nuevas páginas de inicio, mensaje, contacto, el efecto de la operación es el siguiente

Supongo que te gusta

Origin blog.csdn.net/qq_35262929/article/details/127608662
Recomendado
Clasificación