vue-awesome-swiper 问题

重生之我是菜鸡程序员

已于 2024-09-06 15:11:46 修改

阅读量326

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-09-04 14:08:33 首次发布

本文链接：https://blog.csdn.net/NiHao___/article/details/141892188

版权

1.无法使用ref

		<Swiper loop ref="swiperRef" class="swiper animate__animated animate__fadeIn" :modules="modules"
				:slides-per-view="5" :centered-slides="true" :space-between="0" :grab-cursor="true"
				@swiper="onSwiperInit" @slide-change="changeSwiper" @click="clickSwiperItem">
				<SwiperSlide v-for="(n,index) in listTow" :key="index">
					<view class="swiper_list" v-show="list.length>0">
						<view :class="[currentImage === n.id ? 'image_box_1' : 'image_box']"></view>
						<image :class="currentImage===n.id&&'select_image'" class="swiper_slide_image"
							:src="n.iconPath0" />
					</view>
				</SwiperSlide>
			</Swiper>

//无法直接使用ref

	const swiperRef = ref(null)

//必须在初始化的时候赋值才能使用slideTo
	const onSwiperInit = (swiper) => {
		swiperRef.value = swiper

		setTimeout(() => {
			swiperRef.value.slideTo(swiperIndex.value, 500, false)
		}, 100)
	}

2.在开启loop后点击SwiperSlide切换后乱跳

//更改前	
	<Swiper loop ref="swiperRef" class="swiper animate__animated animate__fadeIn" :modules="modules"
				:slides-per-view="5" :centered-slides="true" :space-between="0" :grab-cursor="true"
				@swiper="onSwiperInit" @slide-change="changeSwiper" >
				<SwiperSlide v-for="(n,index) in listTow" :key="index" @click="clickSwiperItem">
					<view class="swiper_list" v-show="listTow.length>0">
						<view :class="[currentImage === n.id ? 'image_box_1' : 'image_box']"></view>
						<image :class="currentImage===n.id&&'select_image'" class="swiper_slide_image"
							:src="n.iconPath0" />
					</view>
				</SwiperSlide>
			</Swiper>

//更改后
	<Swiper loop ref="swiperRef" class="swiper animate__animated animate__fadeIn" :modules="modules"
				:slides-per-view="5" :centered-slides="true" :space-between="0" :grab-cursor="true"
				@swiper="onSwiperInit" @slide-change="changeSwiper" @click="clickSwiperItem">
				<SwiperSlide v-for="(n,index) in listTow" :key="index">
					<view class="swiper_list" v-show="listTow.length>0">
						<view :class="[currentImage === n.id ? 'image_box_1' : 'image_box']"></view>
						<image :class="currentImage===n.id&&'select_image'" class="swiper_slide_image"
							:src="n.iconPath0" />
					</view>
				</SwiperSlide>
			</Swiper>
//将click 给swiper  而不是SwiperSlide  获取其clickedIndex的值

	const clickSwiperItem = (e) => {
		swiperRef.value.slideTo(e.clickedIndex, 500, false);
	}