Maison > Article > interface Web > Comment implémenter la barre de navigation en utilisant vue

Comment implémenter la barre de navigation en utilisant vue

亚连original: 2018-06-20 18:29:285148parcourir

Cet article présente principalement en détail la méthode d'implémentation de la barre de navigation dans le projet vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Chaque projet de page Web est indispensable pour la barre de navigation. peut être écrit via la méthode originale. Mais si vous souhaitez écrire du code avec moins de code et une faible redondance, vous devez utiliser votre cerveau pour y réfléchir.

J'ai récemment écrit un projet Baidu Map, qui nécessite une barre de navigation en bas. Les détails sont les suivants :

Tout d'abord, nous avons obtenu toutes les images d'icônes dans la barre de navigation inférieure. Il existe deux types d'images. Les gris représentent les images non sélectionnées et celles sélectionnées sont remplacées par des images avec des exemples de couleurs.

Jetons d'abord un coup d'œil à la structure html du composant : utilisez la méthode v-for fournie par vue pour parcourir et afficher le tableau footNav. Le tableau contient {title: "Bank", url: " ", url1: " "} Liez le src de l'image à isSelect et jugez s'il est égal au titre actuel, la navigation actuelle est sélectionnée et affichée. . URL de l'image1 lorsqu'elle est sélectionnée.

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

Les styles sont moins écrits dans le langage des extensions, donc tout le monde devrait pouvoir les comprendre, ils sont simplement imbriqués. Ajoutez une largeur de 100 % et une hauteur fixe à cette zone. Comme il doit être affiché en bas, un positionnement et une couleur d'arrière-plan fixes sont ajoutés. J'écris un projet mobile et les navigateurs sont relativement nouveaux, il n'est donc pas nécessaire de prendre en compte les problèmes de compatibilité. La disposition flexible et audacieuse peut facilement implémenter la barre de navigation.

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

Définir un tableau dans vue data(), qui stocke le titre de chaque navigation, tel que 'Banque', l'url de l'image affichée lorsqu'elle n'est pas sélectionnée, et l'url de l'image lorsqu'elle est sélectionnée . isSelect indique celle actuellement sélectionnée et la banque est sélectionnée par défaut.

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

Dans la méthode méthodes, écrivez l'événement appelé en html. Grâce à l'événement click selectMapNav(item.title) dans la couche de structure HTML, le titre transmis est attribué à isSelect pour réaliser le changement de l'état de clic de la barre de navigation.

selectMapNav (title) {
 this.isSelect = title }

Regardons le résultat final, il est parfait.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus