uniProject/components/wSwiper/wSwiper.vue

<template>
	<swiper :circular="false" @change="onChangeTab" :current="data.current" :duration="data.duration"
		:style="{'height': swiperHeight + 'px'}">
		<swiper-item v-for="(cItem,index) in props.list" :key="cItem">
			<view class="item flex-col flex-center">
				<slot :item="cItem"></slot>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted,
		nextTick
	} from 'vue';
	import {
		onLoad,
	} from "@dcloudio/uni-app";

	const props = defineProps({
		swiperHeight: { // swiper的高度
			type: Number,
			default: 0
		},
		positionIndex: { // 当前的数据的下标，直接定位到某条数据时使用
			required: false,
			type: Number,
			default: 0
		},
		list: { // 数据数组
			required: true,
			type: Array,
			default: []
		},
	})
	const emits = defineEmits(['change'])
	const data = reactive({
		current:0,
		duration: 500
	})
	
	watch(() => props.positionIndex, (val) => {
		data.duration = 0
		data.current = props.positionIndex
		positionData()
	}, {
		immediate: true
	})
	watch(() => props.list, (val) => positionData(), {
		immediate: true
	})

	
	function positionData() {
		if (props.list[data.current]) {
			props.list[data.current].mta_show = true;
		}
		if (props.list[data.current+1]) {
			props.list[data.current+1].mta_show = true;
		}
		if (props.list[data.current-1]) {
			props.list[data.current-1].mta_show = true;
		}
		nextTick(() => {
			data.duration = 500;
		})
	}
	function onChangeTab(e) {
		data.current = e.detail.current;
		if (props.list[data.current+1]) {
			props.list[data.current+1].mta_show = true;
		}
		if (props.list[data.current-1]) {
			props.list[data.current-1].mta_show = true;
		}
		emits('change', data.current)
	}
</script>


<style>

</style>