weapp tabbar

Composant de barre d'onglets personnalisée de l'applet WeChat (TabBar)

Prend en charge les icônes sans texte, les grandes icônes, les icônes flottantes, etc.

Téléchargement du code source : https://github.com/tanggaowei/weapp-tabbar

Le code du composant de barre d'onglets personnalisé se trouve dans le répertoire /commpents/tabbar et peut être directement copié dans d'autres projets pour utilisation. Ce qui suit décrit comment l'utiliser.

1. Composants de référence

Dans le fichier json de la page qui doit utiliser la barre d'onglets, utilisez usingComponents pour référencer le composant de barre d'onglets :

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

2. Ajouter des composants

Ajoutez maintenant le composant dans le fichier wxml :

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

Définissez ensuite les données du composant dans le fichier js, telles que la barre d'onglets :

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

Le format de données du composant de barre d'onglets personnalisé est le même que celui de la barre d'onglets d'origine du mini-programme. Ici, nous nous concentrons sur l'utilisation des nouveaux attributs iconType et choose .

iconType a un total de 4 valeurs : big , overflow , circle et shadow . Ces quatre valeurs peuvent être utilisées individuellement ou simultanément. Séparez-les par des espaces lorsqu'ils sont utilisés simultanément (en fait cela sera renseigné dans l'attribut class de la balise correspondante). Leurs fonctions sont les suivantes :

• big utilise de grandes icônes et définit la largeur et la hauteur de l'icône à 95rpx, ce qui est égal à la hauteur de la barre d'onglets ;
• le débordement déplace l'icône vers le haut afin qu'une partie de celle-ci soit affichée en dehors de la barre d'onglets ;
• Cercle coupe l'image de l'icône en cercle ;
• Shadow ajoute une ombre à l'icône.

L'attribut Choose a deux valeurs : activer et désactiver, et la valeur par défaut est activer. Lorsqu'il est désactivé, cliquer sur l'élément d'étiquette ne modifiera pas l'état sélectionné de la barre d'étiquette, mais l'événement de changement sera toujours déclenché.

3. Surveiller les événements de commutation

Utilisez l'attribut bindchange pour lier l'événement d'écoute :

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

Implémentez ensuite la méthode d'écoute dans 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
      })
    }
  }

La méthode d'écoute obtiendra deux données : e.detail.key et e.detail.index . Parmi eux, e.detail.key correspond à la valeur clé de l'élément de tableau data tabbar.list, qui n'est pas aussi bon que home, tag, new, notebook et moi ci-dessus. e.detail.index correspond au numéro de séquence de l'élément du tableau, tel que 0, 1, 2, 3, 4.

4. Plan pratique

1) Composants personnalisés

Les composants personnalisés sont similaires aux pages et ont leurs propres modèles wxml et styles wxss, ce qui facilite la séparation de la logique et des vues, ce qui est mieux que d'utiliser directement des modèles. Voici un exemple de code pour basculer à l'aide d'un composant personnalisé dans 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>

Parmi eux, <home> , <tag> , <notebook> et <me> sont quatre composants personnalisés qui implémentent respectivement leurs propres fonctions.

2) Utilisez des modèles

L'effet de commutation peut également être obtenu à l'aide de modèles, mais le code logique devra peut-être être écrit sur la même page. Par exemple:

 <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) Navigation et saut

Vous pouvez utiliser wx.navigateTo() ou wx.redirectTo() dans la méthode d'écoute pour changer de contenu de page. Par exemple:

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