详解Vue底部导航栏组件
作者：孤独浪人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:"社区",
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底部导航栏详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！