- 功能需求
(1)点击导航栏中的相应文字,其所属栏目就高亮显示,那这个页面所属的栏目;
(2)点击文字之后,进入相应的页面,即实现路由跳转。
- 实现代码
Bottom.vue:
<template>
<div id="bottom">
<ul>
<li :class="{checkColor:item.ischeck}" @click="changeColor(index)" v-for="(item,index) in nav" :key="index">
<icon-svg :icon-class="item.icon" />
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
import menudata from './menudata'
export default {
name: 'Bottom',
data(){
return {
nav:null,
status:0
}
},
mounted(){
this.nav=menudata.nav;
this.status=menudata.s;
},
methods:{
changeColor(index){
// 控制当前页面进行修改
this.nav[this.status].ischeck=false;
this.nav[index].ischeck=true;
this.status=index;
// 编程式路由
// 用a链接会将图标的点击颜色抵消掉
this.$router.push({
path:this.nav[index].path
});
// 修改底层数据
menudata.nav=this.nav;
menudata.s=index;
}
}
}
</script>
<style lang="scss" scope>
@import '../../assets/css/iconfont.css';
#bottom{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 4rem;
background-color: rgb(240, 240, 240);
ul{
display: flex;
flex-direction: row;
li{
flex: 1;
list-style: none;
display: flex;
flex-direction: column;
text-align: center;
.svg-icon{
flex: 1;
font-size: 1.6rem;
margin: 0.45rem 2.55rem;
}
a{
flex: 1;
text-decoration: none;
color: #000;
font-size: 0.9rem;
}
}
}
}
.checkColor{
color: green !important;
}
</style>
- 组件在加载时,页面重新渲染,数据进行初始化。因此需将数据建成外部的配置文件,通过配置文件加载(配置文件的数据是统一的),即可新建一个名为
menudata.js
的文件。
menudata.js:
let menudata={
nav:[
{
title:"微信",
path:"/",
icon:"xingzhuangjiehe",
ischeck:false
},
{
title:"通讯录",
path:"/User",
icon:"tongxunlu",
ischeck:false
},
{
title:"发现",
path:"/Find",
icon:"faxian",
ischeck:false
},
{
title:"我的",
path:"/My",
icon:"yonghu_zhanghao_wode",
ischeck:false
}
],
// 接收之前的变量
s:0
};
export default menudata;
- 目录结构