詳解Vue底部導航欄組件
更新時間：2019年05月02日 10:18:05 作者：孤獨浪人1
這篇文章主要介紹了Vue底部導航欄的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
不多說直接上代碼 BottomNav.vue：
<template>
<div class="footer">
<div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)">
<img :src="index===idx?item.iconSelect:item.icon">
<p :class="['colorChange',{on:index===idx}]" >{{item.name}}</p>
</div>
</div>
</template>
<script type="text/javascript">
export default{
props:['idx'],
data(){
return {
items:[{
cls:"home",
name:"首頁",
push:"/home",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
},
{
cls:"shares",
name:"股票",
push:"/shares",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
},
{
cla:"community",
name:"社區(qū)",
push:"/community",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
},
{
cla:"mine",
name:"我的",
push:"/mine",
icon:"../static/home.png",
iconSelect:"../static/home_select.png"
}]
}
}
}
</script>
:src="index===idx?item.iconSelect:item.icon" 通過代碼判斷是否是當前頁面，選擇不通的圖片
@click="$router.push(item.push) 跳轉到各個頁面
Style:
.footer{
display: flex;
position: absolute;
left: 0;
bottom: 0;
box-sizing: border-box;
height: 6rem;
background: #909090;
width: 100%;}
div{
flex: 1;
font-size: 30px;
}
div img{
width: 30px;
height: 30px;
}
div p{
color:black;
}
.on{
color: red;
}
使用方式：
導入：
<BNai :idx="0"> </BNai>
以上所述是小編給大家介紹的Vue底部導航欄詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了解決vue scoped html樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了淺談Vue數據響應思路之數組，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
在前后端交互的時候,有時候需要通過get或者delete傳遞一個數組給后臺,下面下面這篇文章主要給大家介紹了關于vue中get方法\post方法如何傳遞數組參數,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue使用file-saver插件保存各種格式文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue中ElementUI結合transform使用時彈框定位不準確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進行縮放,但是此時發(fā)現彈框定位出錯問題,無法準備定位到實際位置,本文給大家分享Vue中ElementUI結合transform使用時彈框定位不準確解決方法,感興趣的朋友一起看看吧2024-01-01
vue?cli+axios踩坑記錄+攔截器使用方式,代理跨域proxy
這篇文章主要介紹了vue?cli+axios踩坑記錄+攔截器使用方式,代理跨域proxy，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解Axios統(tǒng)一錯誤處理與后置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue2中使用echarts實現中國地圖、在中國地圖上標注坐標散點圖的操作代碼
這篇文章主要介紹了vue2中使用echarts實現中國地圖、在中國地圖上標注坐標散點圖,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue中echarts自動輪播tooltip問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06