Tabs swiper 滑动切换

<template>
	<view class="cc-tab-container">
		<scroll-view class="tab-head" :class="tabClassName" scroll-x="true" scroll-with-animation :scroll-left="state.scrollLeft">
			<view class="tab-head-item" :class="{ 'active': index === currentIndex  }" 
				v-for="(item, index) in tabs" :id="'tab_'+item.id" :key="index" @click="swichTab(index)">
				<view class="tab-text">{{item.name}}</view>
				<view class="tab-line-box">
					<view class="tab-line" :style="'width:' + lineWidth"></view>
				</view>
			</view>
		</scroll-view>
		<swiper class="tab-swiper" 
			:class="swiperClassName" 
			:disable-touch="disableTouch" 
			:current="currentIndex" 
			@change="changeSwiper">
			<solt></solt>
		</swiper>
	</view>
</template>

<script setup>
	import { reactive, computed } from 'vue'
	
	const props = defineProps({
		tabs: {
			type: Array,
			default: []
		},
		currentIndex : { // 从0 开始
			type: Number,
			default: 0
		},
		tabWidth: {
			type: Number,
			default: 60
		},
		lineWidth: {
			type: String,
			default: '50rpx'
		},
		tabClassName: {
			type: String,
			default: ''
		},
		// 是否滑动切换
		disableTouch: {
			type: Boolean,
			default: false
		},
		swiperClassName: {
			type: String,
			default: ''
		}
	})
	
	const state = reactive({
		scrollLeft: 0
	})
	
	const emits = defineEmits(['changeSwiper', 'swichTab'])
	
	const swichTab = (index) =>  {
		state.scrollLeft = 0
		
		for (let i = 0; i < index; i++) {
			state.scrollLeft += state.tabWidth
		};
		
		emits("swichTab", index)
	}
	
	const changeSwiper = (e) => {
		emits("changeSwiper", e.detail.current)
	}
</script>

<style lang="scss">
.cc-tab-container {
	.tab-head {
		display: flex;
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		background-color: $cc-color-white;
		text-align: center;
		border-bottom: 1px solid #ddd;
		
		&-item {
			display: inline-block;
			white-space: nowrap;
			height: 86rpx;
			position: relative;
			margin: 0 40rpx;
	
			.tab-text {
				font-size: 26rpx;
			}
	
			.tab-line-box {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: center;
	
				.tab-line {
					height: 4rpx;
					border-radius: 4rpx;
				}
			}
			
			&.active{
				.tab-text{
					color: $cc-color-primary;
				}
				.tab-line {
					background:  $cc-color-primary;
				}
			}
		}
	}
	
	.tab-swiper {
		flex: 1;
		margin-top: 20rpx;
	}
}
</style>

使用

 <cc-tab-swiper :tabs="state.tabs" :currentIndex="state.currentIndex" @swichTab="swichTab" @changeSwiper="changeSwiper">
		<swiper-item class="tab-content-item">
			<view class="swiper-item">选项卡a1</view>
		</swiper-item>
</cc-tab-swiper>

注意

目前小程序 swiper-item 不支持 solt，在页面中直接使用组件内容

效果