uni-app 小程序 左右切换 滑动菜单,左右滑块菜单，左右滑动tab菜单

效果图：

代码结构如下

<!-- 好像要从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>