vue實(shí)現(xiàn)nav導(dǎo)航欄的方法
每一個網(wǎng)頁項(xiàng)目都少不了導(dǎo)航欄，通過原始的方法基本上都是可以寫出來的。但是要寫出代碼量少，冗余度低的代碼就要動腦子思考一下了。
最近寫了一個百度地圖的項(xiàng)目，要求底部有一個導(dǎo)航欄。具體如下圖：
首先，拿到了底部導(dǎo)航欄的所有圖標(biāo)圖片，圖片都有兩種?；疑拇砦催x中，選中的用帶樣色的圖片替換。
先看一下，組件中 html結(jié)構(gòu)：通過vue提供的v-for方法，進(jìn)行遍歷顯示footNav這個數(shù)組。數(shù)組里邊存放著{title:"銀行"，url:" "，url1:" "}，將圖片的 src與isSelect進(jìn)行綁定，并進(jìn)行判斷，如果等于當(dāng)前的title時即為選中當(dāng)前的導(dǎo)航，顯示選中時的圖片url1。
<div 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>
</div>
樣式用的是擴(kuò)展語言less寫的，應(yīng)該都能看懂，只是簡單的嵌套了一下。給這個地步加一個寬為100%，固定的高度。因?yàn)橐潭ㄔ诘撞匡@示，所以加了一個固定定位和背景顏色。寫的是手機(jī)端項(xiàng)目，瀏覽器都比較新，所以不用考慮兼容問題。大膽的flex布局可以很方便的實(shí)現(xiàn)導(dǎo)航欄。
.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 () 中定義一個數(shù)組，里邊存放每一個導(dǎo)航的標(biāo)題，如‘銀行'，未選中時顯示的圖片url，選中時的圖片url1。isSelect表示當(dāng)前選中的，默認(rèn)選中銀行。
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: '醫(yī)院 ', 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'}
]
在methods方法中，寫上html中調(diào)用的事件。通過html結(jié)構(gòu)層那里的點(diǎn)擊事件selectMapNav(item.title)傳過來的title賦值給isSelect即可實(shí)現(xiàn)導(dǎo)航欄的點(diǎn)擊狀態(tài)的變化。
selectMapNav (title) {
this.isSelect = title }
來看一下最終的結(jié)果，很完美。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Vue實(shí)現(xiàn)自定義下拉菜單功能
- 詳解Vue用自定義指令完成一個下拉菜單（select組件）
- vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)帶過渡效果的下拉菜單功能
- vue實(shí)現(xiàn)下拉菜單樹
- 解決vue動態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題
- vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
- vue使用ElementUI時導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)
- Vue實(shí)現(xiàn)導(dǎo)航欄菜單
- vue實(shí)現(xiàn)導(dǎo)航欄下拉菜單
相關(guān)文章
vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vuecli4插件svg-sprite-loader使用svg圖標(biāo)
這篇文章主要為大家介紹了vuecli4插件svg-sprite-loader使用svg圖標(biāo)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
VUEJS實(shí)戰(zhàn)之利用laypage插件實(shí)現(xiàn)分頁（3）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯誤并且美化時間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
本篇文章主要介紹了Vue表單類的父子組件數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
elementUI中el-dropdown的command實(shí)現(xiàn)傳遞多個參數(shù)
這篇文章主要介紹了elementUI中el-dropdown的command實(shí)現(xiàn)傳遞多個參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue用addRoutes實(shí)現(xiàn)動態(tài)路由的示例
本篇文章主要介紹了vue用addRoutes實(shí)現(xiàn)動態(tài)路由的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
解決ElementUI組件中el-upload上傳圖片不顯示問題
這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了項(xiàng)目nginx部署到非根目錄下vue配置方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue-editor-bridge報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04