话不多说,直接上代码
<swiper :loop="false" :autoplay="{delay:1500,disableOnInteraction:false}" class="mySwiperTwo" :modules="modules"
@slideChange="onSlideChange" @swiper="setControlledSwiper" :controller="{ control: controlledSwiper }">
<swiper-slide class="one firstImg" v-for="(item, index) in swiperList" :key="index">
<div class="leftShowdown">
<div class="textContent">
<p>{{ item.title }}</p>
<span>{{ item.text }}</span>
<div class="footerPie">
<li v-for="(item,index1) in 4" :key="index1" @click="pieChange(index1)">
<span v-if="index1 == currentPage"></span>
</li>
</div>
</div>
</div>
<img :src="item.img" alt="">
</swiper-slide>
</swiper>
我这里是嵌套了一个swiper,第二个才是需要点击跳转到指定页
import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
import { Pagination, Navigation,Mousewheel ,Autoplay,Controller } from 'swiper/modules';
const modules = [Pagination, Mousewheel,Autoplay,Navigation,Controller ];
const controlledSwiper = ref();
const setControlledSwiper = (swiper:any) => {
controlledSwiper.value = swiper;
console.log(controlledSwiper.value);
};
const pieChange = (index:number)=>{
currentPage.value = index
controlledSwiper.value?.slideTo(index, 500)
}
核心问题就是在使用sideTo的时候需要引入控制器Controller,才能使用swiper实例当中的方法。