uniapp 顶部 横向tab

<template>
	<template>
		<view class="tabs-container">
			<scroll-view scroll-x class="tabs-scroll" :show-scrollbar="false">
				<view class="tabs">
					<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }"
						@click="switchTab(index)">
						{{ tab }}
						<view class="underline" v-if="currentTab === index"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<swiper class="content-swiper" :current="currentTab" @change="onSwiperChange"
			:style="{ height: contentHeight + 'px' }">
			<swiper-item v-for="(tab, index) in tabs" :key="index" class="swiper-item">
				<view class="content-box">
					<!-- 这里放你的具体内容 -->
					<text>{{ tab }} 的内容区域</text>
					<!-- 示例：根据 tab 显示不同数据 -->
					<view v-if="index === 0">全部内容...</view>
					<view v-if="index === 1">矿场咨询内容...</view>
					<view v-if="index === 2">安全教育内容...</view>
					<view v-if="index === 3">岗位规范内容...</view>
				</view>
			</swiper-item>
		</swiper>
	</template>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'

	let currentTab = ref(0)
	let tabs = ref(['全部', '矿场咨询', '安全教育', '岗位规范'])
	const contentHeight = ref(500)

	const switchTab = (index) => {
		currentTab.value = index
	}

	const onSwiperChange = (e : any) => {
		currentTab.value = e.detail.current
	}
</script>

<style scoped lang="scss">
	// tab签
	.tabs-container {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		z-index: 999;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.tabs-scroll {
		white-space: nowrap;
		width: 100%;
	}

	.tabs {
		display: inline-flex;
		padding: 20rpx 30rpx;
	}

	.tab-item {
		position: relative;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		color: #666;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #007AFF;
		font-weight: 500;
	}

	.underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
		height: 6rpx;
		background: #007AFF;
		border-radius: 3rpx;
		animation: underlineShow 0.3s ease-out;
	}

	@keyframes underlineShow {
		from {
			width: 0;
			opacity: 0;
		}

		to {
			width: 60%;
			opacity: 1;
		}
	}

	// swiper 内容
	.content-swiper {
		width: 100%;
		background-color: skyblue;
	}

	.swiper-item {
		height: 100%;
		overflow-y: auto;
	}

	.content-box {
		padding: 30rpx;
		min-height: 100%;
	}
</style>