Miniprogramm Benutzerdefinierte TabBar-Komponentenkapselung

In diesem Artikelbeispiel wird der spezifische Code zum Einkapseln der benutzerdefinierten TabBar-Komponente des Miniprogramms zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Erstellen Sie eine neue Komponente: Erstellen Sie eine TabBar unter der Komponente

2. Die index.wxml-Struktur der Komponente ist wie folgt:

<cover-view Klasse="Tab-Leiste">
 <cover-view Klasse="tab-bar-border"></cover-view>
 <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="tabChange">
  <cover-image src="{{tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
  <cover-view style="Farbe: {{tabbarIndex === index ? selectedColor : color}}">{{item.text}}</cover-view>
 </Cover-Ansicht>
</Cover-Ansicht>

3. Die index.wxss-Struktur der Komponente ist wie folgt:

.tab-bar {
  Position: fest;
  unten: 0;
  links: 0;
  rechts: 0;
  Höhe: 60px;
  Hintergrund: weiß;
  Anzeige: Flex;
  Polsterung unten: Umgebung (Sicherheitsbereich, Einschub unten);
}

.tab-bar-border {
  Hintergrundfarbe: rgba(0, 0, 0, 0,33);
  Position: absolut;
  links: 0;
  oben: 0;
  Breite: 100 %;
  Höhe: 1px;
  transformieren: scaleY(0,5);
}

.tab-bar-item {
  biegen: 1;
  Textausrichtung: zentriert;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Flex-Richtung: Spalte;
}

.tab-bar-item cover-image {
  Breite: 28px;
  Höhe: 28px;
  Rand unten: 2px;
}

.tab-bar-item cover-view {
  Schriftgröße: 10px;
}

4. Die index.js-Struktur der Komponente ist wie folgt:

// Seiten/Komponenten/TabBar/index.js
Komponente({
  /**
 1. Liste der Komponenteneigenschaften*/
  Optionen:
    multipleSlots: true // Aktivieren Sie die Unterstützung für mehrere Slots in den Optionen, wenn Sie die Komponente definieren},
  Eigenschaften:
    Liste: {
      Typ: Array,
      Wert: []
    },
    ausgewählteFarbe:{
      Typ: Zeichenfolge,
      Wert:''
    },
    Farbe:{
      Typ: Zeichenfolge,
      Wert:''
    },
  },

  /**
 2. Ausgangsdaten des Bauteils*/
  Daten: {
    tabbarIndex: 0 //Standardmäßig wird das erste Tab-Element angezeigt},

  Lebensdauern:
    beigefügt() {}
  },

  /**
 3. Komponentenmethodenliste*/
  Methoden: {
    //Komponenten-Klickereignis tabChange(e) {
      //Index des unteren Balkenelements abrufen let index = e.currentTarget.dataset.index;
      dies.setData({
        tabbarIndex:index,
      })
      //triggerEvent ruft das Ereignis der Komponente ab //onMyEvent Der von der Seite übergebene Name des Klickereignisses this.triggerEvent('onMyEvent',{
        tabbarIndex:index,
      })
    },
  }
})

5. Die index.json-Struktur der Komponente ist wie folgt:

{
  "Komponente": wahr,
  "usingComponents": {}
}

6. Verwendung von Komponenten in Seiten
7. Der JSON-Code der Seite lautet wie folgt:

{
  "navigationBarTitleText": "Test",
  "Komponenten verwenden": {
    "mp-tabbar": "../Komponenten/tabBar/index"
  }
}

8. Der WXML-Code der Seite lautet wie folgt:

//Der Inhalt, der auf der Seite angezeigt wird, wenn Tab1 ausgewählt ist <view wx:if="{{tabbarIndex == 0}}">111111</view>
//Der Inhalt, der auf der Seite angezeigt wird, wenn Tab2 ausgewählt ist <view wx:if="{{tabbarIndex == 1}}">222222</view>
//Der Inhalt, der auf der Seite angezeigt wird, wenn Tab3 ausgewählt ist <view wx:if="{{tabbarIndex == 2}}">333333</view>
<mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="tabChange"></mp-tabbar>

9. Der JS-Code der Seite lautet wie folgt:

Seite({
  Daten: {
    tabbarIndex:0, //Standardfarbe des ersten Tab-Elements: "#555555",
    ausgewählteFarbe: "#2ea7e0",
    //Liste der unteren Leiste: [{
        "text": "Markt",
        "iconPath": "/images/bazaar.png",
        "selectedIconPath": "/images/bazaar_selected.png",
      },
      {
        "text": "Aufladen",
        "iconPath": "/images/recharge.png",
        "selectedIconPath": "/images/recharge_selected.png",
      }, {
        "text": "Flotte",
        "iconPath": "/images/market.png",
        "selectedIconPath": "/images/market_selected.png",
      }
    ]
  },
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
    diese.tabComponent = diese.selectComponent('#tabComponent');
    Lassen Sie selectedColor = this.data.selectedColor;
    lass Farbe = diese.Daten.Farbe;
    diese.tabComponent.setData({
      ausgewählteFarbe: ausgewählteFarbe,
      Farbe: Farbe
   })
   Konsole.log(diese.Tab-Komponente.Daten.TabbarIndex)
  },
  //Die von der Komponente übergebenen Daten abrufen tabChange:function(e){
    let index = e.detail.tabbarIndex;
    dies.setData({
      tabbarIndex:index
    })
    console.log(e.detail.tabbarIndex)
  }
})

Der endgültige Effekt ist in der Abbildung dargestellt:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

WeChat Mini-Programm (Teil 3) Detaillierte Einführung in die TabBar-Navigation unten
WeChat-Applet-Entwicklung zur Realisierung des Seitenwechsels über Tabs (TabBar oben im Fenster)
WeChat-Applet-Entwicklung: Detaillierte Erläuterung des Tabbar-Beispiels
Das WeChat-Applet erstellt eine neue Anmeldeseite und blendet die TabBar aus
Offizielles Beispiel einer dynamischen benutzerdefinierten unteren TabBar des WeChat Mini-Programms
Detaillierte Erläuterung der benutzerdefinierten TabBar-Anpassung des WeChat-Applets in der Uni-App
Implementierung von Tabbar-Symbolen und -Farben in der WeChat-Applet-Entwicklung
WeChat-Applet-Entwicklungsregisterkarte (TabBar am unteren Rand des Fensters) Seitenwechsel
Detaillierte Erläuterung des Verwendungsbeispiels der TabBar des WeChat-Applet
Detaillierte Erläuterung der Entwicklung der benutzerdefinierten TabBar-Komponente des WeChat-Applets

<<: Lösen Sie das Problem, dass Docker Sudo-Operationen verwenden muss

>>: Techniken zur Wiederverwendung von HTML