<template><view class="tab-container"><!-- Tab 标签滚动容器 --><scroll-view scroll-x="true" class="tab-scroll" scroll-with-animation="true"><view class="tab-list"><viewv-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设置伪元素来实现