uniapp中scrollview配合swiper实现一个简单的tab标签页

<template>
  <view class="tab-container">
    <!-- Tab 标签滚动容器 -->
    <scroll-view scroll-x="true" class="tab-scroll" scroll-with-animation="true">
      <view class="tab-list">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: currentIndex === index }"
          @click="changeTab(index)"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view>

    <!-- 内容区域 -->
    <swiper
      :current="currentIndex"
      class="swiper-content"
      @change="onSwiperChange"
      :duration="300"
      scroll-x="true"
    >
      <swiper-item v-for="(item, index) in tabs" :key="index">
        <view class="swiper-item-content">
          <!-- 内容区域的具体内容 -->
          <view>{{ item.name }} Content</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const tabs = ref([
      { name: 'Tab 1' },
      { name: 'Tab 2' },
      { name: 'Tab 3' },
	  { name: 'Tab 4' },
	  // { name: 'Tab 5' },
	  // { name: 'Tab 6' },
	  // { name: 'Tab 7' },
	  // { name: 'Tab 8' },
	  // { name: 'Tab 9' },
      // ... 更多 Tab
    ]);

    const currentIndex = ref(0);

    const changeTab = (index: number) => {
      currentIndex.value = index;
    };

    const onSwiperChange = (e: any) => {
      currentIndex.value = e.detail.current;
    };

    return {
      tabs,
      currentIndex,
      changeTab,
      onSwiperChange,
    };
  },
};
</script>
<style>
.tab-container {
  width: 100%;
}

.tab-scroll {
  white-space: nowrap;
  overflow-x: auto;
}

.tab-list {
  display: flex;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
}

.tab-item.active {
  color: #f10606;
}

.swiper-content {
  height: 300px; /* 设置内容区域的高度 */
}

.swiper-item-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.active::after {
	content: '';
	position: absolute;
	/* background-image: url(../../static/checkDetails/action.png); */
	background-size: 100%;
	background: #f00;
	background-repeat: no-repeat;
	width: 40px;
	height: 4px;
	top: 38px;
	left: 30px;
}
</style>

基本思路

1横向滚动的动画效果主要依靠scrollview自带的croll-with-animation="true"来设置

2 而底部下划线则是给当前激活的tab设置伪元素来实现