当前位置：首页 > news >正文

vue-awesome-swiper 问题

news 2025/7/30 7:40:35

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 chipListTow" :key="index"><view class="swiper_list" v-show="chipList.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>//无法直接使用refconst swiperRef = ref(null)//必须在初始化的时候赋值才能使用slideToconst onSwiperInit = (swiper) => {swiperRef.value = swipersetTimeout(() => {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 chipListTow" :key="index" @click="clickSwiperItem"><view class="swiper_list" v-show="chipList.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 chipListTow" :key="index"><view class="swiper_list" v-show="chipList.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);}

查看全文

http://www.mrgr.cn/news/19533.html