Benutzerdefinierte Komponente der unteren Navigationsleiste des WeChat-Applets

<Vorlage>
  <view v-if="showTabbar" class="tabbar">
    <Ansicht
      v-for="(Element, Index) in TabList"
      :Schlüssel="Index"
      Klasse="Symbol"
      @click="TabBar wechseln(Element.Pfad, Index)"
    >
      <image :src="index == aktuell ? item.iconActivePath : item.iconPath"></image>
      <text :class="index == aktuell ? 'active_text' : 'text'" bindtap = 'go'>{{ item.name }}</text>
    </Ansicht>
  </Ansicht>
</Vorlage>
 
<Skript>
  // Container aus '@/channelMessage/get-container' importieren
 
  Standard exportieren {
    Requisiten: {
      Tabbar anzeigen: {
        Typ: Boolean,
        Standard: true,
      },
      current:{ // aktueller Seitenindex
    Typ: Nummer,
    Standard: 0
   },
    },
    Daten() {
      zurückkehren {
        ausgewählter Index: 0,
        RegisterkarteListe: [
          {
            Name: "Home",
            Symbolpfad: erforderlich("../../../static/image/img/tab-home-nor.png"),
            iconActivePath: erfordern("../../../static/image/img/tab-home-sel.png"),
          Pfad: "/pages/index/index",
          },
          {
            Name: "Warenkorb",
            Symbolpfad: erforderlich("../../../static/image/img/tab-cart-nor.png"),
            iconActivePath: erfordern("../../../static/image/img/tab-cart-sel.png"),
            Pfad: "/pages/cart/cartEdit",
          },
          {
            Name: "Mein",
            Symbolpfad: erforderlich("../../../static/image/img/tab-my-nor.png"),
            iconActivePath: erfordern("../../../static/image/img/tab-my-sel.png"),
            Pfad: "/pages/mine/mine",
          },
        ],
    }
    },
 
    beiAnzeigen() {
      // const containerId = container.getContainerId()
      // wenn (Container-ID == '1000') {
      // diese.showTabbar = false
      // }
    },
    Methoden: {
    switchTabBar(Pfad, Index) {
      this.item_index = Index
      wx.switchTab({
          URL: Pfad,
      })
        // this.$router.replace(Pfad)
      },
    
    },
}
</Skript>
 
<style lang="scss" scoped>
  .tabbar {
    Position: fest;
    unten: 0;
    Z-Index: 10;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: Abstand herum;
    Breite: 100 %;
    Höhe: 100rpx;
    Hintergrundfarbe: #ffffff;
    Polsterung unten: Konstante (Safe-Area-Inset-Bottom);
    Polsterung unten: Umgebung (Sicherheitsbereich, Einschub unten);
 
    .Symbol {
      Anzeige: Flex;
      Flex-Richtung: Spalte;
      Elemente ausrichten: zentrieren;
 
      Bild {
        Breite: 50rpx;
        Höhe: 50rpx;
      }
  }
  .aktiver_text{
        Schriftgröße: 20rpx;
        Rand oben: 5rpx;
    Farbe: #d81e06;
      }
  .Text{
    Schriftgröße: 20rpx;
    Rand oben: 5rpx;
    }
  }
</Stil>

"TabBar": {
    "ausgewählteFarbe": "#EE2F51",
    "Liste": [{
      "pagePath": "Seiten/Index/Index",
      "text": "Startseite",
      "iconPath": "statisch/Bild/Img/tab-home-nor.png",
      "selectedIconPath": "statisch/Bild/Img/tab-home-sel.png"
    },{
      "pagePath": "Seiten/Warenkorb/WarenkorbBearbeiten",
      "text": "Warenkorb",
      "iconPath": "statisch/Bild/Img/tab-cart-nor.png",
      "selectedIconPath": "statisch/Bild/Img/tab-cart-sel.png"
    },{
      "pagePath": "Seiten/meine/meine",
      "text": "Mein",
      "iconPath": "statisch/Bild/img/tab-my-nor.png",
      "selectedIconPath": "statisch/Bild/img/tab-my-sel.png"
    }]
  },

importiere tabBar aus "./customComponents/commonComponents/tabBar/index.vue";

//Ändern Sie die Position Ihrer Komponente. Das index.vue hier ist das zuvor erwähnte tabbar.vue
Vue.component("tabBar", tabBar);

//Fügen Sie der Seite die Navigationsleistenkomponente hinzu <tabBar :current=item_index></tabBar>
 
//Status markieren, ja die Navigationsleiste kann je nach Seite data() { unterschiedliche Aktivierungsstatus anzeigen.
      zurückkehren {
        Artikelindex: 0,
      }
}
 
//WeChats integrierte Navigationsleiste ausblenden onLoad() {
      wx.hideTabBar();
},