vue--实现移动端导航栏效果

基本步骤：

<template><div class="wrap"><div class="nav_left" id="navLeft"><div class="nav_content"><span v-for="(obj, index) in arr" :key="obj.first_id" @click="changeTab(index)">{{obj.first_name}}</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>

2.在 data 中定义一一个变量来记录当前哪个索引对应的 sapn 需要高亮(默认第0个)显示；在 span 元素里利用动态class(:class="")来进行判断：当前记录的索引（isSlecIndex ）是否等于当前 span 元素对应的索引（index），如果相等那么就添加高亮显示的 class（active），否则就不添加

data {return: {isSlecIndex: 0, // 记录当前应该哪个索引对应的 sapn 需要高亮(默认第0个)}}

<span :class="{active: isSlecIndex == index}">{{obj.first_name}}</span>

3.给 span 标签添加点击事件并将当前的 index 所有当作参数传给该事件，实现点击哪个 导航栏 就让其对应的 this.isSlecIndex = index 这样就可以达到高亮显示，其余未点击的 导航栏 保持默认

<span @click="changeTab(index)">{{obj.first_name}}</span>

methods: {changeTab (index) {this.isSlecIndex == index // 把 isSlecIndex 的值赋予给应该高亮的 span 元素的 index，即可实现 }}

完整代码：

<template><div class="wrap"><div class="nav_left" id="navLeft"><div class="nav_content"><span :class="{active: isSlecIndex == index}" v-for="(obj, index) in arr" :key="obj.first_id" @click="changeTab(index)">{{obj.first_name}}</span></div></div><div class="down"><i class="iconfont icon-xiajiantoubeifen gray"></i></div></div></template><script>export default {data() {return {isSlecIndex: 0, // 记录当前应该哪个索引对应的 sapn 需要高亮(默认第0个)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",},],};},methods: {changeTab (index) {this.isSlecIndex = index // 把 isSlecIndex 的值赋予给应该高亮的 span 元素的 index，即可实现 }}};</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>