So implementieren Sie die Navigationsleiste mit Vue

Dieser Artikel stellt hauptsächlich die Implementierungsmethode der Navigationsleiste im Vue-Projekt vor. Er hat einen gewissen Referenzwert.

Im Grunde ist jedes Webseitenprojekt unverzichtbar kann mit der ursprünglichen Methode geschrieben werden. Wenn Sie jedoch Code mit weniger Code und geringer Redundanz schreiben möchten, müssen Sie Ihr Gehirn zum Nachdenken anregen.

Ich habe kürzlich ein Projekt für Baidu Maps geschrieben, das unten eine Navigationsleiste erfordert. Die Details sind wie folgt:

Zuerst haben wir alle Symbolbilder in der unteren Navigationsleiste angezeigt. Es gibt zwei Arten von Bildern. Die grauen stellen die nicht ausgewählten dar und die ausgewählten werden durch Bilder mit Beispielfarben ersetzt.

Werfen wir zunächst einen Blick auf die HTML-Struktur in der Komponente: Verwenden Sie die von Vue bereitgestellte V-For-Methode, um das FootNav-Array zu durchlaufen und anzuzeigen. Das Array enthält {title: "Bank", url: " ", url1: " "}. Binden Sie die Quelle des Bildes an isSelect und treffen Sie eine Beurteilung. Wenn sie mit dem aktuellen Titel übereinstimmt, wird die aktuelle Navigation ausgewählt und angezeigt . Bild-URL1, wenn ausgewählt.

<p class="footer">
 <ul>
 <li v-for="item in footNav" @click="selectMapNav(item.title)">
  <img :src="isSelect === item.title ? item.url1 : item.url" alt="">
  <p>{{item.title}}</p>
 </li>
 </ul>
</p>

Der Stil ist in der Erweiterungssprache weniger geschrieben, daher sollte ihn jeder verstehen können, er ist nur verschachtelt. Fügen Sie diesem Bereich eine Breite von 100 % und eine feste Höhe hinzu. Da es unten angezeigt werden muss, werden eine feste Positionierung und Hintergrundfarbe hinzugefügt. Ich schreibe ein mobiles Projekt und die Browser sind relativ neu, sodass Kompatibilitätsprobleme nicht berücksichtigt werden müssen. Das fette Flex-Layout kann die Navigationsleiste problemlos implementieren.

.footer ul{
 width:100%;
 height:50px;
 position:fixed;
 bottom:0;
 z-index:1;
 background-color:#fff;
 display:flex;
 li{
 text-align:center;
 flex:1;
 img{height:23px;width:23px;margin-top:5px;}
 p{font-size:0.1rem;height:15px;line-height:10px;}
 }
}

Definieren Sie ein Array in vue data(), das den Titel jeder Navigation speichert, z. B. „Bank“, die angezeigte Bild-URL, wenn sie nicht ausgewählt ist, und die Bild-URL1, wenn sie ausgewählt ist. isSelect gibt die aktuell ausgewählte Bank an und die Bank ist standardmäßig ausgewählt.

isSelect: '银行',
footNav: [{title: '银行', url: '../../../static/baiduMap/23@2x.png', url1: '../../../static/baiduMap/22@2x.png'},
 {title: '公交 ', url: '../../../static/baiduMap/11@2x.png', url1: '../../../static/baiduMap/10@2x.png'},
 {title: '地铁 ', url: '../../../static/baiduMap/13@2x.png', url1: '../../../static/baiduMap/12@2x.png'},
 {title: '教育 ', url: '../../../static/baiduMap/15@2x.png', url1: '../../../static/baiduMap/14@2x.png'},
 {title: '医院 ', url: '../../../static/baiduMap/17@2x.png', url1: '../../../static/baiduMap/16@2x.png'},
 {title: '休闲 ', url: '../../../static/baiduMap/19@2x.png', url1: '../../../static/baiduMap/18@2x.png'},
 {title: '购物 ', url: '../../../static/baiduMap/21@2x.png', url1: '../../../static/baiduMap/20@2x.png'}
]

Schreiben Sie in der Methodenmethode das aufgerufene Ereignis in HTML. Durch das Klickereignis selectMapNav(item.title) in der HTML-Strukturebene wird der übergebene Titel isSelect zugewiesen, um die Änderung des Klickstatus der Navigationsleiste zu realisieren.

selectMapNav (title) {
 this.isSelect = title }

Werfen wir einen Blick auf das Endergebnis, es ist perfekt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Erklärung des Scope-Bereichs in AngularJS

So erreichen Sie eine leistungsstarke Ladereihenfolge in Javascript

So implementieren Sie die globale Registrierung in Axios

So implementieren Sie einen Login-Verifizierungssprung mit Vue+Flask (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Navigationsleiste mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!