详解Vue底部导航栏组件

不多说直接上代码BottomNav.vue：<template><divclass="footer"><divv-for='(item,index)ofitems':clas

不多说直接上代码 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底部导航栏详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

Vue底部导航栏组件 Vue底部导航栏 Vue实现底部导航栏组件