【uniapp】vue3 同一个页面轮播图同步自动播放

最近遇到了这种情况，同一个页面上的轮播图需要同步自动播放，直接用swiper组件的autoplay 在真机上看会出现不同步的这种情况

			<!-- 活动图片 -->
			<view class="excontent">
				<view class="exitem" v-for="(item,index) in exavicityList" :key="index">
					<image class="myimg" :src="item.title" mode="widthFix"></image>
					<swiper circular :interval="3000" :duration="1000" autoplay="true" class="exswiper" next-margin="40rpx" previous-margin='40rpx' ref="exSwiper" :current="item.current">
						<swiper-item v-for="(itemimg,indeximg) in item.imgs" :key="indeximg" class="swiperitem">
							<view class="simg" v-if="index<2">
								<image class="myimg" :src="itemimg" mode="widthFix"></image>
							</view>
							<view class="simg1" v-else>
								<image class="myimg" :src="itemimg" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="final">
					<image class="myimg" :src="setCdn('/myimgs/explore/final.png')" mode="widthFix"></image>
				</view>

			</view>

于是只能用js来控制自动轮播
首先在swiper标签关闭自动播放的相关设置

		<!-- 活动图片 -->
			<view class="excontent">
				<view class="exitem" v-for="(item,index) in exavicityList" :key="index">
					<image class="myimg" :src="item.title" mode="widthFix"></image>
					<swiper circular class="exswiper" next-margin="40rpx" previous-margin='40rpx' ref="exSwiper" :current="item.current">
						<swiper-item v-for="(itemimg,indeximg) in item.imgs" :key="indeximg" class="swiperitem">
							<view class="simg" v-if="index<2">
								<image class="myimg" :src="itemimg" mode="widthFix"></image>
							</view>
							<view class="simg1" v-else>
								<image class="myimg" :src="itemimg" mode="widthFix"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="final">
					<image class="myimg" :src="setCdn('/myimgs/explore/final.png')" mode="widthFix"></image>
				</view>

			</view>

其次 我的三个轮播图是写在同一个list里面的，用current来控制了当前轮播图的序号

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from "@dcloudio/uni-app";
	
		let exavicityList = reactive([{
			title: setCdn('/myimgs/explore/avt1.png'),
			imgs: [
				setCdn('/myimgs/explore/avi1-1.png'),
				setCdn('/myimgs/explore/avi1-2.png'),
				setCdn('/myimgs/explore/avi1-3.png'),
				setCdn('/myimgs/explore/avi1-4.png'),
				setCdn('/myimgs/explore/avi1-5.png'),
			],
			current:0
		},
		{
			title: setCdn('/myimgs/explore/avt2.png'),
			imgs: [
				setCdn('/myimgs/explore/avi2-1.png'),
				setCdn('/myimgs/explore/avi2-2.png'),
				setCdn('/myimgs/explore/avi2-3.png'),
				setCdn('/myimgs/explore/avi2-4.png'),
				setCdn('/myimgs/explore/avi2-5.png'),
			],
			current:0
		},
		{
			title: setCdn('/myimgs/explore/avt3.png'),
			imgs: [
				setCdn('/myimgs/explore/avi3-1.png'),
				setCdn('/myimgs/explore/avi3-2.png'),
				setCdn('/myimgs/explore/avi3-3.png'),
			],
			current:0
		},
	])
	//控制swiper自动播放
	function swiperAuto() {
		setInterval(()=>{
			for(let i=0;i<exavicityList.length;i++){
				if(exavicityList[i].current<exavicityList[i].imgs.length-1){
					exavicityList[i].current++
				}else{
					exavicityList[i].current=0
				}
			}
		},3000)
	}
	onLoad((option) => {
		swiperAuto()
	});
</script>

这样就可以啦