Mini programa WeChat --- barra de pestañas y salto de página
Agregue el nodo tabBar en el archivo app.json. tabBar es la implementación de la barra de pestañas superior o inferior del mini programa cliente.
(1) propiedades relacionadas con tabBar
color: el color predeterminado del texto en la etiqueta, solo se admiten colores hexadecimales.
selectedColor: el color del texto cuando se selecciona la pestaña. Solo se admiten colores hexadecimales.
backgroundColor: el color de fondo de la pestaña, solo se admiten colores hexadecimales.
borderStyle: el color del borde de la barra de pestañas, solo se admite blanco y negro.
posición: la posición de la barra de pestañas, el valor predeterminado es: abajo, solo se admite abajo/arriba. {
"color":?#000000",
"selectedColor":?"#336699",
"backgroundColor":?#ffffff",
"borderStyle":?" negro",
"position":?" inferior"
? ｝
(2) lista
lista: lista de pestañas.
list acepta un array y sólo puede configurar un mínimo de 2 y un máximo de 5 pestañas.
pagePath: ruta de la página, que debe definirse primero en la página.
Texto: El texto del botón en la pestaña.
iconPath: ruta de la imagen, el tamaño del icono está limitado a 40kb, el tamaño recomendado es 81px * 81px, no se admiten imágenes web. selectedIconPath: la ruta de la imagen cuando se selecciona. El tamaño del icono está limitado a 40 kb. El tamaño recomendado es 81 px * 81 px.
"lista":?[
?{
"text":?Home",
"pagePath":?" páginas/index/index",
"iconPath":?" activos/icon/home.png",
"selectedIconPath":?"
?{
"texto":?" lista",
"pagePath":?" páginas/lista /lista",
"iconPath":?" activos/icon/list.png",
"selectedIconPath":?" activos/icon/list2.png"
｝
]
2. Salto de página
(1) Saltar a página normal
Método ① Componente del navegador
?
Componente de navegación
?--?Salta a la página normal y puede regresar mediante el botón de retorno?-->
?navigator?url=". /detail/detail"> Saltar a la página detallada
Método ② método de navegaciónTo()
Método de navegaciónTo(), utilizado para saltar a páginas normales.
gotoDetail(){
// Utilice la API global para saltar, El método navegarTo() salta a una página normal
wx. )
}
(2) Saltar a la página TabBar
Método ① Componente del navegador
Si desea utilizar el componente del navegador Para saltar a la página de la barra de pestañas, debe configurar open-type=" switchTab".
?--?El uso del botón Atrás no puede saltar a la página de la barra de pestañas. ¿Porque saltar a la página TabBar especificada cerrará todas las demás páginas? -->
Método 2 método switchTab()
El método switchTab() se utiliza para saltar a la página tabBar.
gotoList(){
wx.switchTab({
?url : ?' ... /lista/lista',
})
?}
?