swiper回调获取点击的真实slide

2021-08-27  本文已影响0人  Hasan_hs

问题1:loop模式下slide点击失效
原因:在loop模式下slides前后会复制若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click事件
处理:使用 swiper 提供的 api 进行解决

 <div class="swiper-container">    
        <div class="swiper-wrapper">
                <div class="swiper-slide " data-属性名="属性值">
                              内容
                  </div>
            </div>
</div>
new Swiper('.swiper-container', {
                    loop:true,
                    on: {
                        click(e) {
                            //this.clickedSlide点击的真实slide,dataset为获取slide元素的属性值
                            console.log(this.clickedSlide.dataset)
                        }
                    },
                });

问题2:swiper回调函数this指针指向swiper
处理:初始化外定义变量指向this

//用that指向this;
let that = this;
new Swiper('.swiper-container', {
   loop:true,
    on: {
          click(e) {
             //这里使用that来操作vue实例
           }
     },
})
上一篇 下一篇

猜你喜欢

热点阅读