Vue中使用Swiper绑定事件不生效的解决办法
最近做项目使用了Swiper,遇到的坑是设置Swiper为Loop时,绑定的点击事件部分会不生效。
一.解决办法
-
不用Vue的v-bind去绑定事件,直接用Swiper的on去绑定事件即可。如下,click的事件绑定自己method中的事件即可。
var mySwiper = new Swiper('.swiper-container',{ on:{ click: function(){ alert('你点了Swiper'); }, }, })
-
通过事件委托的方式将事件绑定给父级元素,通过e.target拿到当前的slide,来触发Swiper每一个slide的点击事件。(当你的slide中还有多个元素需要绑定不同时间的时候,事件委托的优越性就更加凸显啦~)
-
第三种感觉是最蠢的方式,可以等待dom加载完成,获取到每一个slide的dom元素,再去给每一个dom绑定对应的点击事件。之所以说这种方法蠢,一是因为在Vue中直接操作的dom的方式本就不值得提倡,二是通过上述事件委托的方式去解决这种问题更合适。Vue中没有做事件委托的处理,很多时候我们通过v-for遍历生成dom,并给每一个dom绑定事件,虽然简便,但是却因为绑定多个事件而增加了开销,所以遇到这种情形,使用事件委托更好一些。
二. 绑定点击事件不生效的原因
出现点击事件不生效的情形在我们使用loop的情况下。原因在于Swiper为了实现loop,会在你自己的slide dom前后各复制一个新的slide,复制的slide仅保留了原来的html和css结构,并没有绑定上原来的事件。
无图无真相~
类名为swiper-slide-duplicate的dom即swiper的复制元素
再进一步的去看一下dom上绑定的点击事件吧~
从图1.2 和 图1.3 中可以看到复制的dom仅在container容器上绑定了事件,slide上并没有绑定上事件。
以看到复制的dom仅在container容器上绑定了事件,slide上并没有绑定上事件。
到这里问题的根源就很清晰了,就是单纯复制dom是不顶事的,绑定的点击事件依然无法复制过去。以Vue数据驱动视图的思想来想这个问题,其实还有一种解决办法,即不使用Swiper的loop属性,自己通过扩展数据来复制dom,自己实现无限轮播的效果。但是这种方法只是徒增烦恼啦~有不正确的或者更好的方法,欢迎指正!