首頁 >web前端 >js教程 >使用vue如何實作nav導覽欄

使用vue如何實作nav導覽欄

亚连
亚连原創
2018-06-20 18:29:285172瀏覽

這篇文章主要為大家詳細介紹了vue專案nav導覽列的實現方法,具有一定的參考價值,有興趣的小夥伴們可以參考一下

每個網頁專案都少不了導覽欄,透過原始的方法基本上都是可以寫出來的。但是要寫出程式碼量少,冗餘度低的程式碼就要動腦子思考一下了。

最近寫了一個百度地圖的項目,要求底部有一個導航列。具體如下圖:

首先,拿到了底部導覽列的所有圖示圖片,圖片都有兩種。灰色的代表未選中,選中的用帶樣色的圖片替換。

先看一下,元件中 html結構:透過vue提供的v-for方法,進行遍歷顯示footNav這個陣列。陣列裡邊存放著{title:"銀行",url:" ",url1:" "},將圖片的src與isSelect進行綁定,並進行判斷,如果等於當前的title時即為選中當前的導航,顯示選取時的圖片url1。

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

樣式用的是擴展語言less寫的,應該都能看懂,只是簡單的嵌套了一下。給這個地步加一個寬為100%,固定的高度。因為要固定在底部顯示,所以加了一個固定定位和背景顏色。寫的是手機端項目,瀏覽器都比較新,所以不用考慮相容問題。大膽的flex佈局可以很方便的實作導覽列。

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

在vue data () 中定義一個數組,裡邊存放每一個導航的標題,如‘銀行',未選中時顯示的圖片url,選中時的圖片url1。 isSelect表示目前選取的,預設選取銀行。

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

在methods方法中,寫上html中呼叫的事件。透過html結構層那裡的點擊事件selectMapNav(item.title)傳過來的title賦值給isSelect即可實現導覽列的點擊狀態的變化。

selectMapNav (title) {
 this.isSelect = title }

來看一下最終的結果,很完美。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

angularjs中有關scope作用域解釋

在javascript中如何實作高效能的載入順序

在axios中如何實現全域註冊

使用Vue Flask如何實現登入驗證跳轉(詳細教學)

#

以上是使用vue如何實作nav導覽欄的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn