uniProject/components/wSwiper/DSwiper.vue

<template>
	<swiper :circular="false" @change="onChangeTab" :duration="currentDuration" :current="current"
		: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
	} 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 current = ref(0)
	const currentDuration = ref('500')
	
	watch(() => props.positionIndex, (val) => positionData(), {
		immediate: true
	})
	watch(() => props.list, (val) => positionData(), {
		immediate: true
	})

	
	function positionData() {
		if(!props.list){
			return
		}
		
		if (props.list[current]) {
			props.list[current].mta_show = true;
		}
		if (props.list[current+1]) {
			props.list[current+1].mta_show = true;
		}
		if (props.list[current-1]) {
			props.list[current-1].mta_show = true;
		}
		console.log(props.list);
	}
	
	function changeCurrent(data) {
		current.value = data
	}
	
	function onChangeTab(e) {
		current.value = e.detail.current;
		if (props.list[current+1]) {
			props.list[current+1].mta_show = true;
		}
		if (props.list[current-1]) {
			props.list[current-1].mta_show = true;
		}
		emits('change', current.value)
	}
</script>


<style>

</style>