weapp tabbar

Componente da barra de guias personalizada do miniaplicativo WeChat (TabBar)

Suporta ícones sem texto, ícones grandes, ícones flutuantes, etc.

Download do código-fonte: https://github.com/tanggaowei/weapp-tabbar

O código do componente da barra de guias customizada está no diretório /commpents/tabbar e pode ser copiado diretamente para outros projetos para uso. O seguinte descreve como usá-lo.

1. Componentes de referência

No arquivo json da página que precisa usar a barra de guias, use usingComponents para fazer referência ao componente da barra de guias:

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

2. Adicione componentes

Agora adicione o componente no arquivo wxml:

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

Em seguida, defina os dados do componente no arquivo js, ​​como tabbar:

 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": "我"
        }
      ]
    }
  }
})

O formato de dados do componente da barra de guias personalizada é o mesmo da barra de guias original do miniprograma. Aqui nos concentramos no uso dos novos atributos iconType e choose .

iconType tem um total de 4 valores: big , overflow , circle e shadow . Esses quatro valores podem ser usados ​​individualmente ou simultaneamente. Separe-os com espaços quando usados ​​simultaneamente (na verdade será preenchido no atributo class da tag correspondente). Suas funções são as seguintes:

• big usa ícones grandes e define a largura e altura do ícone para 95rpx, que é igual à altura da barra de guias;
• overflow move o ícone para cima para que parte dele seja exibida fora da barra de guias;
• Círculo corta a imagem do ícone em um círculo;
• Shadow adiciona uma sombra ao ícone.

O atributo escolha possui dois valores: ativar e desativar, e o padrão é ativar. Quando estiver desativado, clicar no item do rótulo não alterará o estado selecionado da barra de rótulos, mas o evento de alteração ainda será acionado.

3. Monitore eventos de comutação

Use o atributo bindchange para vincular o evento de escuta:

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

Em seguida, implemente o método de escuta em 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
      })
    }
  }

O método de escuta obterá dois dados: e.detail.key e e.detail.index . Entre eles, e.detail.key corresponde ao valor-chave do elemento da matriz data tabbar.list, que não é tão bom quanto home, tag, new, notebook e me acima. e.detail.index corresponde ao número de sequência do elemento da matriz, como 0, 1, 2, 3, 4.

4. Plano prático

1) Componentes personalizados

Os componentes personalizados são semelhantes às páginas e possuem seus próprios modelos wxml e estilos wxss, o que facilita a separação da lógica e das visualizações, o que é melhor do que usar modelos diretamente. Aqui está um exemplo de código para alternar usando um componente personalizado em 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 eles, <home> , <tag> , <notebook> e <me> são quatro componentes personalizados que implementam suas próprias funções, respectivamente.

2) Use modelos

O efeito de comutação também pode ser obtido usando modelos, mas o código lógico pode precisar ser escrito na mesma página. Por exemplo:

 <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) Navegação e salto

Você pode usar wx.navigateTo() ou wx.redirectTo() no método de escuta para alternar o conteúdo da página. Por exemplo:

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