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