weapp tabbar

Componente de barra de pestañas personalizada del subprograma WeChat (TabBar)

Admite íconos sin texto, íconos grandes, íconos flotantes, etc.

Descarga del código fuente: https://github.com/tanggaowei/weapp-tabbar

El código para el componente de la barra de pestañas personalizada se encuentra en el directorio /commpents/tabbar y se puede copiar directamente a otros proyectos para su uso. A continuación se describe cómo utilizarlo.

1. Componentes de referencia

En el archivo json de la página que necesita usar la barra de pestañas, use usingComponents para hacer referencia al componente de la barra de pestañas:

 {
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

2. Agregar componentes

Ahora agregue el componente en el archivo wxml:

 <tabbar data="{{tabbar}}"></tabbar>

Luego defina los datos del componente en el archivo js, ​​como la barra de pestañas:

 Page({
  data: {
    tabbar: {
      "color": "#999999",
      "selectedColor": "#7788dd",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#ffffff",
      "list": [{
          "key": "home",
          "iconPath": "/images/icon_home.png",
          "selectedIconPath": "/images/icon_home_active.png",
          "text": "首页"
        },
        {
          "key": "tag",
          "iconPath": "/images/icon_tag.png",
          "selectedIconPath": "/images/icon_tag_active.png",
          "text": "标签"
        },
        {
          "key": "new",
          "iconPath": "/images/icon_plus_big.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "iconPath": "/images/icon_notebook.png",
          "selectedIconPath": "/images/icon_notebook_active.png",
          "text": "日记本"
        },
        {
          "key": "me",
          "iconPath": "/images/icon_me.png",
          "selectedIconPath": "/images/icon_me_active.png",
          "text": "我"
        }
      ]
    }
  }
})

El formato de datos del componente de la barra de pestañas personalizada es el mismo que el de la barra de pestañas original del mini programa. Aquí nos centramos en el uso de los nuevos atributos iconType y choose .

iconType tiene un total de 4 valores: big , overflow , circle y shadow . Estos cuatro valores se pueden utilizar de forma individual o simultánea. Sepárelos con espacios cuando se usen simultáneamente (en realidad, se completará en el atributo de clase de la etiqueta correspondiente). Sus funciones son las siguientes:

• big usa íconos grandes y establece el ancho y alto del ícono en 95rpx, que es igual a la altura de la barra de pestañas;
• el desbordamiento mueve el ícono hacia arriba para que parte del mismo se muestre fuera de la barra de pestañas;
• Círculo corta la imagen del icono en un círculo;
• Sombra agrega una sombra al ícono.

El atributo de elección tiene dos valores: habilitar y deshabilitar, y el valor predeterminado es habilitar. Cuando está configurado para deshabilitar, hacer clic en el elemento de etiqueta no cambiará el estado seleccionado de la barra de etiquetas, pero el evento de cambio aún se activará.

3. Monitorear eventos de conmutación

Utilice el atributo bindchange para vincular el evento de escucha:

 <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Luego implemente el método de escucha en Page():

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
    }
  }

El método de escucha obtendrá dos datos: e.detail.key y e.detail.index . Entre ellos, e.detail.key corresponde al valor clave del elemento de matriz tabbar.list de datos, que no es tan bueno como home, tag, new, notebook y yo anteriores. e.detail.index corresponde al número de secuencia del elemento de la matriz, como 0, 1, 2, 3, 4.

4. Plan práctico

1) Componentes personalizados

Los componentes personalizados son similares a las páginas y tienen sus propias plantillas wxml y estilos wxss, lo que facilita la separación de la lógica y las vistas, lo cual es mejor que usar plantillas directamente. Aquí hay un código de muestra para cambiar usando un componente personalizado en index.wxml:

 <home wx:if="{{choose_index==0}}"></home>
<tag wx:if="{{choose_index==1}}"></tag>
<notebook wx:if="{{choose_index==3}}"></notebook>
<me wx:if="{{choose_index==4}}"></me>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

Entre ellos, <home> , <tag> , <notebook> y <me> son cuatro componentes personalizados que implementan sus propias funciones respectivamente.

2) Utilice plantillas

El efecto de cambio también se puede lograr utilizando plantillas, pero es posible que sea necesario escribir el código lógico en la misma página. Por ejemplo:

 <import src='/template/home/home.wxml' />
<import src='/template/tag/tag.wxml' />
<import src='/template/notebook/notebook.wxml' />
<import src='/template/me/me.wxml' />

<template is="home" wx:if="{{choose_index==0}}"></template>
<template is="tag" wx:if="{{choose_index==1}}"></template>
<template is="notebook" wx:if="{{choose_index==3}}"></template>
<template is="me" wx:if="{{choose_index==4}}"></template>

<tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>

3) Navegación y salto.

Puede utilizar wx.navigateTo() o wx.redirectTo() en el método de escucha para cambiar el contenido de la página. Por ejemplo:

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    }
  }