WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz

1. Einleitung

Oftmals kann die mit dem Miniprogramm mitgelieferte TabBar die Projektanforderungen nicht erfüllen, sodass wir die TabBar anpassen müssen. Aber nachdem ich lange im Internet gesucht habe, sind mir vor allem Probleme mit dem Flackern beim Umschalten aufgefallen. Glücklicherweise können Sie ab der Basisbibliothek 2.5.0 offiziell benutzerdefinierte TabBars verwenden.

2. Passen Sie den TabBar-Stil an

Wie in der folgenden Abbildung gezeigt, benötigen wir eine Registerkartenleiste, die „Home“, „Mein“ und eine Seite anzeigt, auf die geklickt werden kann, um zur Veröffentlichung zu springen. Dieser Stil, der native, kann die Anforderungen nicht erfüllen, daher können Sie nur die Registerkartenleiste anpassen.

3. Einführung einer benutzerdefinierten Tab-Leiste und der zugehörigen Konfiguration

3.1. Importieren Sie, wie in der Abbildung unten gezeigt, die benutzerdefinierte Tab-Leiste [Download] in das Stammverzeichnis des Projekts.

3.2. Konfigurieren Sie die Umschalt-Tableiste in app.json und setzen Sie „custom“: true. Setzen Sie dann die Basisbibliothek auf 2.5.0.

3.3. Verwenden Sie eine benutzerdefinierte TabBar und fügen Sie den folgenden Code in onShow der umgeschalteten TabBar-Schnittstelle ein. Beispielsweise ist auf der Startseite der Wert für „Ausgewählte“ 0 und auf meiner Seite der Wert für „Ausgewählte“ 2 festgelegt. Denn selected:1 ist ein spezieller Sprung, bei dem beim Klick auf das Plus-Symbol nicht mehr die Tab-Leiste gewechselt wird, sondern direkt zur Veröffentlichungsoberfläche gesprungen wird.

/**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
    wenn (Typ von this.getTabBar === 'Funktion' &&
      dies.getTabBar()) {
      console.log('Ausgewähltes Element auf 0 setzen')
      dies.getTabBar().setData({
        ausgewählt: 0
      })
    }
  },

4. Demo abschließen

Es sind Tests auf echten Maschinen möglich und die Anwendung ist sehr einfach. 【Vollständige Demo-Download-Adresse】

Zusammenfassen

Dies ist das Ende dieses Artikels zum Anpassen der TabBar des WeChat Mini-Programms. Weitere relevante Inhalte zum Anpassen der TabBar des Mini-Programms finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!