swiper在开启loop后,自动生成虚拟dom,理论上获取realIndex即可,但是我这边获取的index全是错的,因此只能直接操作dom给classname,swiper上的点击事件在复制的dom里面没有被复制,隐藏需要调用swiper自己的点击事件,手动触发点击,但是还遇到个奇怪的问题,初始化点击下一页,理论上是图片数组的第一张,但是未生效,只能单独处理。算是不完美的丑陋解决方法
<swiper class="swiper-rec-out" :options="brandSwiperOptions" ref="mySwiper">
<swiper-slide :class="['swiper-rec-out-arg','swipernum_'+ index]" v-for="(showBrand, index) in showBrandList" :key="index" >
<div class="swiper_list">
<home-link-sec class="brand-swiper-link" :config="showBrand" :source="source.toString()" ref="homelinkDown">
<div class="brand">
<img :src="showBrand.picUrl" alt="">
</div>
</home-link-sec>
<div class="brand_name">
{{showBrand.showName}}
</div>
</div>
</swiper-slide>
</swiper>
brandSwiperOptions: {
slidesPerView: 5, // 同时展示五个轮播项
spaceBetween: 10,
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
},
initialSlide: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
speed: 1000,
observer: true,
observeParents: true,
on: {
click:function (){
vms.brandSwiperClick(this)
},
}
},
brandSwiperClick(vm){
let clickedElement = vm.clickedSlide.classList
clickedElement = Array.from(clickedElement)
const foundClassName = clickedElement.find(className => className.includes("swipernum_"));
let index = null;
if (foundClassName) {
// 提取匹配的数字
const match = foundClassName.match(/swipernum_(\d+)/);
index = match ? parseInt(match[1], 10) : null;
}
if(index == 0){
this.$refs.homelinkDown[0].openPage()
}
this.$nextTick(()=>{
if(this.isLogin && index){
if(this.$refs.homelinkDown[index]){
this.$refs.homelinkDown[index].openPage()
}
}
})
},