Swiper组件使用loop属性,右滑再左滑点击事件不起效的解决办法

在 Vue 项目中使用 npm Swiper 组件,在测试时发现在某些情况下绑定的 click 事件不起效。因为在点击 banner 时要做一些判断,比如是否登录,是否实名认证等,所以必须解决这一问题。

在 swiper 组件启用了 loop 循环模式时,会在原本 slide 前后复制若干个slide(默认一个)并在合适的时候切换,让 Swiper 看起来是循环的。

例如我们有 3 张 Banner,查看代码会发现,loop 模式的 swiper 会在第 1 个 slide 的前面复制一个 3,在 3 个的后面复制了一个 1,这样就可以实现循环的效果了。

但是问题来了,如果给 swiper 中的 slide 绑定了click事件,调用了某个方法的话,复制出来的这两个 slide 并不会把事件也复制过来。

也就是说点击复制出来的这两个 slide 是没办法调用我们的方法的,根本没有任何反应,无法实现页面跳转。

banner-swiper.png Swiper组件使用loop属性,右滑再左滑点击事件不起效的解决办法 经验总结

解决办法:

我查了一下 Swiper 的代码,swiper 有一个 realIndex 属性,代表 slide 真实下标,我们可以通过下标来判断验证条件和跳转的页面。

写一个简单的 swiper :

<!--banner Swiper轮播-->
<swiper class="index-banner" :options="swiperOption" @click.native="bannerSwiperClick()" ref="mySwiper">
  <swiper-slide v-for="(item,index) in bannerSwiperImg" :key="index">
    <img width="100%" :src="item" alt="">
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

JS 部分:

data: function () {
  return {
    bannerSwiperImg: [
      "/static/img/ind-banner-1.png",
      "/static/img/ind-banner-2.png",
      "/static/img/ind-banner-3.png",
    ],
    swiperOption: {
      loop: true,
      pagination: {
        el:'.swiper-pagination',
        type:'bullets',
        clickable:true,
      },
    },
  };
},
methods: {
  bannerSwiperClick(){
    let that = this,
      ind = this.$refs.mySwiper.swiper.realIndex //获取下标
    if (ind < 2){//如果不是3
      if (!isLoggedIn()) {//判断未登录
        window.location = '/Login?St=1';//跳登录
      } else{//已登录
        if (isRealName() !== '1') {//判断是否实名
          this.showModal();//未实名弹窗
        } else {
            window.location = AIMS_URL;
        }
      }
    } else {
      window.location = '/';
    }
  },
},

这样就可以正常执行判断条件进行正常跳转了。使用组件虽然很方便,但有些时候还是很坑的。

说一下这里的 ref

ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的 DOM 元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例。

@click.native

给 Vue 组件绑定事件时候,必须加上 native ,否则会认为监听的是来自 Item 组件自定义的事件

等同于在子组件中:子组件内部处理 click 事件然后向外发送 click 事件:$emit("click".fn)


赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)