Super ausführliches Tutorial zur Implementierung der TabBar untere Navigationsleiste in Vue

Inhaltsverzeichnis

Projekteinführung:
Projektverzeichnis:
Vorschau des TabBar-Effekts:
Idee zur TabBar-Implementierung

1. Wenn sich unten eine separate TabBar-Komponente befindet, wie kann diese gekapselt werden?
2. Der eigentliche Inhalt der TabBar wird von der Außenwelt bestimmt.
3. Passen Sie TabBarItem an, Sie können Bilder und Text einfügen

Erstellen eines Projektdateiverzeichnisses

Einführung in das Dateiverzeichnis

Dateialiascode

App.vue-Code

MainTabBar.vue-Code

TabBar.vue-Code

TabBarItem.vue-Code

Routing-Konfigurationscode von index.js

home.vue-Code

Kategorie.vue-Code

Profil.vue-Code

cart.vue-Code

Base.css-Code

img Bildressourcen

Zusammenfassen:

Hauptschwierigkeiten:

Projekteinführung:

Anforderungen: Der Text in der Tabbar muss dynamisch geändert werden, die zum Text korrespondierenden Bilder müssen dynamisch geändert und hinzugefügt werden, die Textfarbe muss entsprechend geändert werden, die Bilder des TabBarItem müssen dynamisch geändert und hinzugefügt werden, das gesamte Projekt muss flexibel sein und Slots, Routing und Wertetransfer zwischen übergeordneten und untergeordneten Komponenten müssen genutzt werden. $router muss genutzt werden, um beim Anklicken eines Items die entsprechende Seite anzuzeigen. Es ist sehr umfassend. Wenn Sie während der Projektentwicklung auf ähnliche Projekte stoßen, müssen Sie nur den Hauptcode kopieren, um das allgemeine Framework des Projekts zu erstellen.

Projektverzeichnis:

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

Vorschau des TabBar-Effekts:

Kapselung der vueTabBar-Komponente

Idee für die TabBar-Implementierung

1. Wenn sich unten eine separate TabBar-Komponente befindet, wie kann diese gekapselt werden?

Passen Sie die Tabbar-Komponente an und verwenden Sie sie in der App.
Erstellen Sie unten eine TabBar und legen Sie die entsprechenden Stile fest.

2. Der eigentliche Inhalt der TabBar wird von der Außenwelt bestimmt.

Definieren Sie die Steckplätze.
Flex-Layout-Bewertung TabBar.

3. Passen Sie TabBarItem an, Sie können Bilder und Text einfügen

Passen Sie das TabbarItem an und definieren Sie zwei Slots: Bild und Text.
Geben Sie den beiden Slots ein äußeres Wrapper-Div zum Stylen.
Füllen Sie den Schlitz, um den Effekt der unteren TabBar zu erzielen.

Die Methode ist machbar, lasst uns sie zuerst implementieren. Lasst uns das Verzeichnis einführen

Erstellen eines Projektdateiverzeichnisses

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

Einführung in das Dateiverzeichnis

Ich habe einen Ordner mit fünf darin enthaltenen Ansichten erstellt. Die fünf Dateien enthalten fünf Vue-Dateien, die den einzelnen Schaltflächen unter der Navigationsleiste entsprechen.

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

Erstellen Sie unter „Assets“ CSS- und IMG-Ordner, um die für die Tabbar-Schaltflächen erforderlichen Bilder und Basisklassen zu platzieren.

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

Erstellen Sie eine MainTabBar.vue-Datei und einen Tabbar-Ordner im Komponentenordner. Platzieren Sie die Unterkomponenten von MainTabBar und verschiedene Slot-bezogene Dateien im Tabbar-Ordner.

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

Die Indexdatei im Router-Ordner konfiguriert die Routing-Datei

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

main.js ist die Einstiegsdatei des Projekts. Alle Seiten im Projekt laden main.js, daher hat main.js drei Hauptfunktionen:

VUE instanziieren
Platzieren Sie häufig verwendete Plugins und CSS-Stile im Projekt, z. B. Netzwerkanforderungen axios und vue-resource sowie das Lazy-Loading-Modul für Bilder: vue-;azyload
Speichern Sie globale Variablen wie grundlegende Informationen usw.

Codeimplementierung in jedem Ordner

Der erste Schritt besteht darin, einen Dateialias zu erstellen.

Suchen Sie das Resolve-Objekt und schreiben Sie die Aliase aller Dateien in „Alias“:

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

Dateialiascode

Code:

lösen: {
    Erweiterungen: ['.js', '.vue', '.json'],
    Alias: {
      '@': auflösen('src'),
      'Vermögenswerte': auflösen('src/Vermögenswerte'),      
      'Komponenten': auflösen('src/Komponenten'),
      'Ansichten': auflösen('src/views'),
    }
  },

App.vue-Code

Verweisen Sie auf die MainTabBar-Komponente und die Dateien, die den einzelnen Tabbaritems in App.vue entsprechen:

<Vorlage>
  <div id="app">
    <Router-Ansicht></Router-Ansicht>
    <Haupt-Tab-Leiste></Haupt-Tab-Leiste>
  </div>
</Vorlage>
<Skripttyp="Modul">
MainTabBar aus „Komponenten/MainTabBar“ importieren
Standard exportieren {
  Name: "App",
  Komponenten: {
    Haupt-Tab-Leiste
  }
}
</Skript>
 
<Stil>
  @import "Assets/CSS/Basis";
</Stil>

MainTabBar.vue-Code

MainTabBar-Komponentencode: Die Komponente muss die Anforderungen zur dynamischen Änderung von Nummer, Farbe, Text usw. des TabBarItem erfüllen. Es müssen verschiedene Slots erstellt werden.

<Vorlage>
   <div>
       <Tabulatorleiste>
      <tab-bar-item Pfad="/home" activeColor="lila">
        <img slot="item-icon" src="~assets/img/tabbar/shouye.png" alt="" >
        <img slot="item-icon-active" src="~assets/img/tabbar/shouye.active.png" alt="">
        <div slot="item-text">Startseite</div>
      </tab-bar-item>
      <tab-bar-item Pfad="/Kategorie" activeColor="lila">
         <img slot="item-icon" src="~assets/img/tabbar/fenlei.png" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbar/fenlei.active.png" alt="">
         <div slot="item-text">Kategorie</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="lila">
         <img slot="item-icon" src="~assets/img/tabbar/gouwuche.png" alt="">
         <img slot="item-icon-active" src="~assets/img/tabbar/gouwuche.active.png" alt="">
        <div slot="item-text">Warenkorb</div>
      </tab-bar-item>
      <tab-bar-item Pfad="/Profil" activeColor="lila">
         <img slot="item-icon" src="~assets/img/tabbar/wode.png" alt="">
         <img slot="item-icon-active" src="~assets/img/tabbar/wode.active.png" alt="">
        <div slot="item-text">Mein</div>
      </tab-bar-item>
    </tab-bar>
   </div>
</Vorlage>

<Skript>
TabBar aus „Komponenten/Tabbar/TabBar“ importieren
Importiere TabBarItem aus „Komponenten/Tabbar/TabBarItem“.
Standard exportieren {
    Name:"Haupt-Tableiste",
    Komponenten: {
        TabBar,
        TabBarItem
    }
}
</Skript>

<Stil>

</Stil>

TabBar.vue-Code

Ändern Sie die Datei TabBar.vue in die Unterkomponente in MainTabBar.vue:

<Vorlage>  
    <div id="Tabulatorleiste">
      <Steckplatz></Steckplatz>
    </div>
</Vorlage>
<Skript>
Standard exportieren {
    Name: „TabBar“
}
</Skript>

<Stil>

</Stil>

TabBarItem.vue-Code

TabBarItem.vue ist eine Unterkomponente von MainTabBar.vue

<Vorlage>
  <div Klasse="Tab-Leiste-Element" @click="itemClick">
     <div v-if="!istAktiv">
       <slot name="item-icon"></slot>
     </div>
     <div v-sonst>
        <slot name="item-icon-active"></slot>
     </div>
     <div :style="activeStyle"><slot name="item-text"></slot></div>
     
  </div>
</Vorlage>

<Skript>
Standard exportieren {
    Name:"TabBarItem",
    Requisiten:{
      Pfad:String,
      aktiveFarbe:{
        Typ: Zeichenfolge,
        Standard: „rot“
      }
    },
    Daten(){
        zurückkehren {
           // istAktiv:true
        }
    },
    berechnet:{
      istAktiv(){
        //Beurteilung//return this.$route.path.indexOf(this.path) !== -1
        //gib dies zurück.$route.path === dieser.pfad
        gib dies zurück.$route.path.indexOf(this.path)?false:true
      },
      aktivStyle(){
        gib dies zurück.istAktiv?{color:this.activeColor}:{}
      }
    },
    Methoden:{
      itemClick(){
        dies.$router.replace(dieser.pfad)
      }
    }

}
</Skript>

<Stil>
     #Tab-Leiste{
    Anzeige: Flex;
    
  }
  #Tab-Leiste{
    Hintergrundfarbe: #f6f6f6;
    Rahmen oben: 2px #ccc;
    Position: fest;
    links: 0;
    rechts: 0;
    unten: 0;
    Boxschatten: 0px -1px 1px rgba (100,100,100, .2);
  }
  .tab-bar-item{
    biegen: 1;
    Textausrichtung: zentriert;
    Höhe: 49px;
    Schriftgröße: 14px;
  } 
 .tab-bar-item img{
     Breite: 24px;
     Höhe: 24px;
     Rand oben: 3px;
     vertikale Ausrichtung: Mitte;
     Rand unten: 3px;
 }
 .aktiv{
     Farbe: rot;
 }
</Stil>

Routing-Konfigurationscode von index.js

Die Indexdatei im Router-Ordner ist die Routing-Konfiguration:

Vue von „vue“ importieren
importiere VueRouter von „vue-router“;
const Home = () => import('Ansichten/Home/Home')
const Kategorie = () => import('Ansichten/Kategorie/Kategorie')
const Cart = () => import('Ansichten/Warenkorb/Warenkorb')
const Profil = () => import('../views/profile/profile')

//1. Installieren Sie das Plugin Vue.use(VueRouter)

//2. Erstelle ein Routing-Objekt const routes = [
    {
        Weg:'',
        Umleitung: '/home'    
    },
    {
        Pfad: „/home“,
        Komponente:Home    
    },
    {
        Pfad: '/Kategorie',
        Komponente:Kategorie    
    },
    {
        Pfad: '/Warenkorb',
        Komponente:Warenkorb    
    },
    {
        Pfad: „/Profil“,
        Komponente:Profil    
    }
]
const router = neuer VueRouter({
    Routen,
    Modus: „Verlauf“
})

//3. Router exportieren
Standardrouter exportieren

Home-Code, Warenkorb-Code, Profil-Code, Kategorie-Code in Ansichten:

home.vue-Code

<Vorlage>
    <h2>Startseite</h2>
</Vorlage>

<Skript>
Standard exportieren {
    Name:"Startseite"
}
</Skript>

<Stil>

</Stil>

Kategorie.vue-Code

<Vorlage>
    <h2>Kategorien</h2>
</Vorlage>

<Skript>
Standard exportieren {
    Name:"Startseite"
}
</Skript>

<Stil>

</Stil>

Profil.vue-Code

<Vorlage>
    <h2>Persönlich</h2>
</Vorlage>

<Skript>
Standard exportieren {
    Name:"Startseite"
}
</Skript>

<Stil>

</Stil>

cart.vue-Code

<Vorlage>
    <h2>Warenkorb</h2>
</Vorlage>

<Skript>
Standard exportieren {
    Name:"Startseite"
}
</Skript>

<Stil>

</Stil>

Base.css-Code

Der Inhalt von base.css unter der CSS-Datei:

Körper{
    Polsterung: 0px;
    Rand: 0px;
}

img Bildressourcen

Vue implementiert die TabBar-Komponente für die untere Navigationsleiste

Implementierung abgeschlossen~

Zusammenfassen:

Das Projekt ist sehr umfassend und beinhaltet diverse Kenntnisse zu Slots, Routing, Wertübertragung von Unterkomponenten und übergeordneten Komponenten sowie Alias-Einstellungen.
Dynamische Inhalte des Projekts: Texte, Bilder und Farben der Tabbar lassen sich dynamisch verändern und bei ähnlichen Projekten kann beim nächsten Mal direkt auf diese Dateien verwiesen werden.

Hauptschwierigkeiten:

1. Beim Klicken auf das entsprechende TabBarItem ändern wir die Bildfarbe und die Textfarbe. Dabei prüfen wir, ob die aktuell aktive Route mit der übergebenen Adresse übereinstimmt. Wenn ja, wird sie true und gibt false zurück:

berechnet:{
      istAktiv(){
        //Richter returniere this.$route.path.indexOf(this.path)?false:true
      },
      aktivStyle(){
        gib dies zurück.istAktiv?{color:this.activeColor}:{}
      }
    },
    Methoden:{
      itemClick(){
        dies.$router.replace(dieser.pfad)
      }
    }

Der obige Code hat andere Methoden:

       gib dies zurück.$route.path.indexOf(this.path) !== -1
       gib dies zurück.$route.path === dieser.pfad

2. Problem bei der Wertübertragung der übergeordneten Komponente: Die übergeordnete Komponente übergibt den entsprechenden Dateipfad und die Schriftfarbe, die die untergeordnete Komponente akzeptiert und verwendet:

Standard exportieren {
    Name:"TabBarItem",
    Requisiten:{
      Pfad:String,
      aktiveFarbe:{
        Typ: Zeichenfolge,
        Standard: „rot“
      }
    },
    Daten(){
        zurückkehren {}
    },

Projekt abgeschlossen~

Damit ist dieser Artikel über die Implementierung der unteren TabBar-Navigationsleiste in Vue abgeschlossen. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue benutzerdefinierter Tabbar-Implementierungscode für die untere Navigationsleiste
Detaillierte Erklärung der Vue-Komponente der unteren Navigationsleiste
Lösung für das Problem, dass die Unterrouten nicht in der Routenanzeige der ersten Ebene der unteren Navigationsleiste von vue.js angezeigt werden

<<: Lösung zum automatischen Absenden des Formulars und Springen zu anderen Seiten nach Drücken der Eingabetaste auf der Webseite

>>: Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012