swiper在loop情况下 index错乱问题

发布时间:2023年12月28日

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

            },
文章来源:https://blog.csdn.net/nuoyuezuo/article/details/135264555
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。