VUE3----Tabs swiper 滑动切换

原创

已于 2024-04-26 11:54:37 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #Tabs 滑动切换 #Tabs swiper #vue3

于 2024-04-26 09:12:42 首次发布

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 = definePro