swiper 绑定点击事件，点击失效的处理以及事件会触发两次问题

1.前言

一般我们写点击事件，都习惯绑定在标签上 。img或者外层的div上。这样在loop为false的时候，是没有问题的。
当设置loop为true，就有bug了。
你会发现当前图片列表循环完一遍，回到第一张的时候，图片的点击事件是无效的，或者是点击很多次才会触发事件。

2.原因

设置swiper自动轮播后，你会发现浏览器中渲染的swiper-slide已经不是你数据中的个数了。 组件会自动复制第一个和最后一个进行轮播，从而实现无缝连接。但由于只复制slide没有复制点击事件，所以在循环一周回来遇到复制的页面时，点击事件就会失效。

3.解决办法

因此点击事件需要绑定在swiper的配置项中。
在移动端，click 会有 200~300 ms 延迟，所以用 tap 代替 click 作为点击事件。
为了解决tap事件会触发两次的问题，还需要加一个节流操作。
综上，代码如下

swiperConfig: {
  autoplay: {
    disableOnInteraction: false,
  },
  initialSlide: 0,
  on: {
    tap(ev) {
      //获取不到this，提前定义self = this
      if (self.flag) {
        setTimeout(() => {
          self.swiperSlideClicked(ev);  //处理方法
          self.flag = true;
        }, 300);
      }
      self.flag = false;
    },
  },
  loop: true,
},

这一顿操作下来，应该就没啥问题了。但是呢好像并不怎么优雅，下一篇接着说，还有复杂的需求。