weapp tabbar

Benutzerdefinierte Tab-Leistenkomponente (TabBar) des WeChat-Applets

Unterstützt textlose Symbole, große Symbole, schwebende Symbole usw.

Quellcode-Download: https://github.com/tanggaowei/weapp-tabbar

Der Code für die benutzerdefinierte Tab-Leistenkomponente befindet sich im Verzeichnis /commpents/tabbar und kann zur Verwendung direkt in andere Projekte kopiert werden. Im Folgenden wird die Verwendung beschrieben.

1. Referenzkomponenten

Verwenden Sie in der JSON-Datei der Seite, die die Tab-Leiste verwenden muss, usingComponents um auf die Tab-Leistenkomponente zu verweisen:

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

2. Komponenten hinzufügen

Fügen Sie nun die Komponente in die WXML-Datei ein:

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

Definieren Sie dann die Komponentendaten in der JS-Datei, z. B. 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": "我"
        }
      ]
    }
  }
})

Das Datenformat der benutzerdefinierten Tab-Leistenkomponente ist das gleiche wie das der ursprünglichen Tab-Leiste des Miniprogramms. Hier konzentrieren wir uns auf die Verwendung der neuen Attribute iconType und choose .

iconType hat insgesamt 4 Werte: big , overflow , circle und shadow . Diese vier Werte können einzeln oder gleichzeitig verwendet werden. Trennen Sie sie bei gleichzeitiger Verwendung durch Leerzeichen (tatsächlich wird es im Klassenattribut des entsprechenden Tags ausgefüllt). Ihre Funktionen sind wie folgt:

• big verwendet große Symbole und legt die Breite und Höhe des Symbols auf 95 rpx fest, was der Höhe der Tab-Leiste entspricht;
• Überlauf verschiebt das Symbol nach oben, sodass ein Teil davon außerhalb der Tab-Leiste angezeigt wird;
• Kreis schneidet das Bild des Symbols in einen Kreis;
• Schatten fügt dem Symbol einen Schatten hinzu.

Das Attribut „select“ hat zwei Werte: „enable“ und „disable“, und der Standardwert ist „enable“. Wenn es auf „Deaktivieren“ eingestellt ist, wird durch Klicken auf das Beschriftungselement der ausgewählte Status der Beschriftungsleiste nicht geändert, das Änderungsereignis wird jedoch trotzdem ausgelöst.

3. Überwachen Sie Schaltereignisse

Verwenden Sie das Attribut bindchange , um das Listening-Ereignis zu binden:

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

Implementieren Sie dann die Listening-Methode in 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
      })
    }
  }

Die Listening-Methode erhält zwei Daten: e.detail.key und e.detail.index . Unter diesen entspricht e.detail.key dem Schlüsselwert des Array-Elements data tabbar.list, was nicht so gut ist wie die oben genannten Home, Tag, New, Notebook und Me. e.detail.index entspricht der Sequenznummer des Array-Elements, z. B. 0, 1, 2, 3, 4.

4. Praktischer Plan

1) Benutzerdefinierte Komponenten

Benutzerdefinierte Komponenten ähneln Seiten und verfügen über eigene WXML-Vorlagen und WXSS-Stile, was die Trennung von Logik und Ansichten erleichtert, was besser ist als die direkte Verwendung von Vorlagen. Hier ist ein Beispielcode für den Wechsel mithilfe einer benutzerdefinierten Komponente in 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>

Darunter sind <home> , <tag> , <notebook> und <me> vier benutzerdefinierte Komponenten, die jeweils ihre eigenen Funktionen implementieren.

2) Verwenden Sie Vorlagen

Der Umschalteffekt kann auch mithilfe von Vorlagen erreicht werden, der Logikcode muss jedoch möglicherweise auf derselben Seite geschrieben werden. Zum Beispiel:

 <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 und Sprung

Sie können wx.navigateTo() oder wx.redirectTo() in der Listening-Methode verwenden, um den Seiteninhalt zu wechseln. Zum Beispiel:

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