[TOC] 效果图： <img src="https://img.tnblog.net/arcimg/notebook/89de8c2526244570b34682c395af8a43.png" style="width:399px;height:auto;"> #### 代码结构如下 ``` <!-- 好像要从1开始才能默认在第一个菜单开始显示呢...，所以这里减一个1，数据源哪里是加了1的 --> <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent"> <div class="menu-topic-view" v-for="item in tabs" :id="'tabNum' + item.id" :key="item.id - 1" @click="switchMenu(item.id - 1)"> <div :class="currentTab === item.id - 1 ? 'menu-topic-act' : 'menu-topic'"> <span class="menu-topic-text">{{ item.name }}</span> <div class="menu-topic-bottom"> <div class="menu-topic-bottom-color"></div> </div> </div> </div> </scroll-view> ``` #### 样式如下 ``` <style scoped="scoped" lang="scss"> .top-menu-view { white-space: nowrap; width: 100%; background: #f5f5f5; height: 86rpx; line-height: 86rpx; // border-top: 1rpx solid #d8dbe6; .menu-topic-view { display: inline-block; white-space: nowrap; // height: 86rpx; position: relative; .menu-topic-text { font-size: 24rpx; color: #303133; padding: 10rpx 36rpx; background: #fff; border-radius: 4rpx 4rpx 4rpx 4rpx; margin: 0 10rpx; } .menu-topic-bottom { position: absolute; bottom: 0; width: 100%; .menu-topic-bottom-color { width: 40rpx; height: 4rpx; } } .menu-topic-act { .menu-topic-text { background: #5ecdb6; color: #fff; } } } } </style> ``` #### ts如下 ``` <script setup lang="ts" name="tasks"> const tabs = ref<any>([ { id: 1, name: "全部" }, { id: 2, name: "严重异常" }, { id: 3, name: "异常" }, { id: 4, name: "警告" }, { id: 5, name: "预警" }, { id: 6, name: "提醒" }, { id: 7, name: "普通" }, { id: 8, name: "日常" }, ]); const currentTab = ref(0); const tabCurrent = ref("tabNum1"); const switchMenu = (id: number) => { currentTab.value = id; tabCurrent.value = "tabNum" + id; // 下面这块是查询数据的逻辑不用管 state.messages = []; if (state.isChoise) { methods.getMessage(1, ""); } else { methods.getMessage(1, 0); } }; </script> ```