swiper 点击事件无效的问题

现象： 添加在swiper-slide里面的点击事件有时能点击有时不能点击

分析：只有在设置了loop:true的情况下才会出现这个问题

原因：swiper通过复制dom节点来实现无限滚动，但没有复制元素上绑定的事件

解决方法：在轮播配置里面定义事件，即options里面，这样的话可以解决不能点击的问题
但有时候需求会复杂一点，比如需要点击轮播图里面特定元素，做出不同的响应事件，这时候就需要
做一些另外的工作来辅助完成。
首先要将 preventLinksPropagation设置成false，防止冒泡。
然后通过判断点击的元素的类名来响应不同的事件，这个时候，我们可能需要给事件传递参数，
但是需要传递的参数是通过v-for生成的，如何传递，这里我的做法是将参数放到元素的自定义属性里面
然后再获取自定义属性。

swiperOption: {
        spaceBetween: 10,
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: 3,
        slidesOffsetBefore: (document.body.clientWidth * 0.2) / 2,
        preventLinksPropagation: false,
        on: {
          click: (v) => {
            const item = {
              a: v.target.getAttribute('data-a'),
              b: v.target.getAttribute('data-b'),
              c: v.target.getAttribute('data-c')
            }
            switch (v.target.className) {
              case 'a':
                this.handlegg(0)
                break
              case 'b':
                this.handlegg(1, item)
                break
              case 'c':
                this.handlegg(2, item)
                break
            }
          }
        }
      }

轮播图里面某元素

 

  
立即开通

问题解决。