Miniprogramm Benutzerdefinierte TabBar-Komponentenkapselung

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

.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;
}

// 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,
      })
    },
  }
})

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

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

//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>

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)
  }
})