Vue中使用Swiper绑定事件不生效的解决办法

本文介绍在Vue项目中使用Swiper组件时,设置Loop模式下点击事件不生效的问题及三种解决办法:直接使用Swiper.on绑定事件、事件委托绑定给父级元素和直接操作DOM绑定事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue中使用Swiper绑定事件不生效的解决办法

​ 最近做项目使用了Swiper,遇到的坑是设置Swiper为Loop时,绑定的点击事件部分会不生效。

一.解决办法
  1. 不用Vue的v-bind去绑定事件,直接用Swiper的on去绑定事件即可。如下,click的事件绑定自己method中的事件即可。

    var mySwiper = new Swiper('.swiper-container',{
      on:{
        click: function(){
          alert('你点了Swiper');
        },
      },
    })
    
  2. 通过事件委托的方式将事件绑定给父级元素,通过e.target拿到当前的slide,来触发Swiper每一个slide的点击事件。(当你的slide中还有多个元素需要绑定不同时间的时候,事件委托的优越性就更加凸显啦~)

  3. 第三种感觉是最蠢的方式,可以等待dom加载完成,获取到每一个slide的dom元素,再去给每一个dom绑定对应的点击事件。之所以说这种方法蠢,一是因为在Vue中直接操作的dom的方式本就不值得提倡,二是通过上述事件委托的方式去解决这种问题更合适。Vue中没有做事件委托的处理,很多时候我们通过v-for遍历生成dom,并给每一个dom绑定事件,虽然简便,但是却因为绑定多个事件而增加了开销,所以遇到这种情形,使用事件委托更好一些。

二. 绑定点击事件不生效的原因

出现点击事件不生效的情形在我们使用loop的情况下。原因在于Swiper为了实现loop,会在你自己的slide dom前后各复制一个新的slide,复制的slide仅保留了原来的html和css结构,并没有绑定上原来的事件

无图无真相~

在这里插入图片描述

图 1.1 swiper复制dom

类名为swiper-slide-duplicate的dom即swiper的复制元素

再进一步的去看一下dom上绑定的点击事件吧~

在这里插入图片描述

图1.2 非复制dom绑定事件

在这里插入图片描述

图1.3 复制dom绑定事件

从图1.2 和 图1.3 中可以看到复制的dom仅在container容器上绑定了事件,slide上并没有绑定上事件。

以看到复制的dom仅在container容器上绑定了事件,slide上并没有绑定上事件。

到这里问题的根源就很清晰了,就是单纯复制dom是不顶事的,绑定的点击事件依然无法复制过去。以Vue数据驱动视图的思想来想这个问题,其实还有一种解决办法,即不使用Swiper的loop属性,自己通过扩展数据来复制dom,自己实现无限轮播的效果。但是这种方法只是徒增烦恼啦~有不正确的或者更好的方法,欢迎指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值