导航栏高亮
(主要写功能,css,数据及html复制的,代码在下面,)
<template>
<div class="wrap">
<div class="nav_left" id="navLeft">
<div class="nav_content">
<span></span>
</div>
</div>
<div class="down">
<i class="iconfont icon-xiajiantoubeifen gray"></i>
</div>
</div>
</template>
<script>
export default {
data (){
return{
arr: [
{
first_id: "0",
first_name: "热门",
},
{
first_id: "621",
first_name: "\u5496\u5561",
},
{
first_id: "627",
first_name: "\u996e\u98df",
},
{
first_id: "279",
first_name: "\u7537\u88c5",
},
{
first_id: "294",
first_name: "\u5973\u88c5",
},
{
first_id: "122",
first_name: "\u773c\u955c",
},
{
first_id: "339",
first_name: "\u5185\u8863\u914d\u9970",
},
{
first_id: "391",
first_name: "\u6bcd\u5a74",
},
{
first_id: "35",
first_name: "\u978b\u9774",
},
{
first_id: "39",
first_name: "\u8fd0\u52a8",
},
{
first_id: "153",
first_name: "\u7bb1\u5305",
},
{
first_id: "119",
first_name: "\u7f8e\u5986\u4e2a\u62a4",
},
{
first_id: "355",
first_name: "\u5bb6\u7eba",
},
{
first_id: "51",
first_name: "\u9910\u53a8",
},
{
first_id: "334",
first_name: "\u7535\u5668",
},
{
first_id: "369",
first_name: "\u5bb6\u88c5",
},
{
first_id: "10",
first_name: "\u5bb6\u5177",
},
{
first_id: "223",
first_name: "\u6570\u7801",
},
{
first_id: "429",
first_name: "\u6c7d\u914d",
},
{
first_id: "546",
first_name: "\u5065\u5eb7\u4fdd\u5065",
},
{
first_id: "433",
first_name: "\u5b9a\u5236",
},
],
}
}
};
</script>
<style>
.wrap {
width: 100%;
display: flex;
margin: 0.2rem 0 0 0;
position: relative;
}
/*左侧的导航样式*/
.nav_left {
width: 21.1875rem;
overflow: scroll;
}
.nav_left::-webkit-scrollbar {
display: none;
}
.nav_content {
white-space: nowrap;
padding: 0 0.7rem;
}
.nav_content span {
display: inline-block;
padding: 0.4rem 0.6rem;
font-size: 0.875rem;
}
.nav_content .active {
border-bottom: 2px solid #7f4395;
color: #7f4395;
}
.nav_left,
.down {
float: left;
}
/*右侧导航部分*/
.down {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.gray {
color: gray;
display: inline-block;
vertical-align: middle;
}
</style>
1.观察结构我们需要对span标签进行遍历,对页面进行渲染,代码及效果如下
<span v-for="obj in arr" :key="obj.first_id" >{{ obj.first_name }}</span>
2.接下来需要对span增加点击事件 ,需要找到高亮类名.nav_content .active我们需要点击那个将类名加到这个span标签上,想到动态添加类名:class"{active:布尔值}",点击span对布尔值进行控制是我们的思路.这块比较绕先在全局定义一个变量,取名叫id,因为id是独一份的,点击的时候将全局变量id赋值arr数组里的id,利用===判断出布尔值显示
<span
v-for="obj in arr"
:key="obj.first_id"
:class="{ active: obj.first_id ===id}"
@click="Fn(obj.first_id)"
>{{ obj.first_name }}
</span>
export default {
data() {
return {
//这里吧arr删除了占地方
id: "",
};
},
methods: {
Fn(a) {
this.id = a;
},
},
};