vue底部跳转_详解Vue底部导航栏组件
不多說直接上代碼 BottomNav.vue：
{{item.name}}
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:"社區",
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"
}]
}
}
}
: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;
}
使用方式：
導入：
以上所述是小編給大家介紹的Vue底部導航欄詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
總結
以上是生活随笔為你收集整理的vue底部跳转_详解Vue底部导航栏组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux 运行apj,pxe+ris-
- 下一篇： jsx怎么往js里传参数_在vue中使用