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);
}