1.html

<view><!-- tab栏切换动态改变激活样式 --><view class="nav"><view class="nav-list" v-for="(item,index) in list" :key="item.id" @tap="changeAct(item)"><!-- 激活样式名字是红色 判断act==index 和act==item.id都行--><view :class="[act==index?'name':'']">{{item.name}}</view><!-- 名字下面的横线 --><view :class="[act==index?'line':'']"></view></view></view><!-- 内容的改变 --><view class="content"><view class="">{{content.id}}</view><view class="">{{content.name}}</view></view></view>

2，js

<script>export default {data() {return {// 默认激活样式是第一个act: 0,list: [{id: 0,name: '吃饭'},{id: 1,name: '学习'},{id: 2,name: '睡觉'}],content: ''};},methods: {changeAct(item) {// 激活样式是当前点击的对应下标--list中对应idthis.act = item.id;// 可以根据点击事件改变内容this.content = item}},onShow() {// 页面默认显示的是list列表中第一条数据this.content = this.list[0]}}
</script>

3.css

<style scoped>.nav {height: 100rpx;display: flex;align-items: center;justify-content: space-around;background-color: rgba(0, 0, 0, .8);font-size: 30rpx;color: orange;letter-spacing: 2.14rpx;}.nav-list {width: 65rpx;height: 100%;margin-top: 40rpx;opacity: .9;}.nav-list .name {color: red;}.nav-list .line {margin-top: 10rpx;width: 65rpx;height: 4rpx;background-color: red;}/* 内容 */.content {margin-top: 40rpx;}
</style>