詳解Vue底部導航欄組件

2019-11-19 11:39:31

字體：大中小

來源：轉載

供稿：網友

不多說直接上代碼 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;	}

使用方式：

導入：