swiper.js loop 小坑


swiper.js 是一款强大的插件,也是我最喜欢的开源插件之一。它可以轻松实现轮播、tab 标签以及各种风骚的页面滑动效果。

我在自己的很多项目里都用到了 swiper,配合 vue 使用真的非常方便。不过近日遇到一个小坑,几番搜索和试验,才发现与 loop 特性有关。

具体现象是,当 swiper 开启 loop 属性实现循环轮播,同时用 vue 的事件绑定语法为每个轮播页绑定事件,当轮播到特定的页面时绑定的事件无法被正常监听。

例如下面的代码:

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="i in 2" :key="i">Slide {{ i }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'app',

  mounted () {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true
    })

    console.log(mySwiper)
  },

  methods: {
    handleClick (i) {
      console.log(`click slide ${i}`)
    }
  }
}
</script>

这段代码实际上添加了两页轮番,loop = true 会实现循环轮播的效果。但实际使用过程中发现,Slide1 上绑定的 click 事件监听,除了初始时第一次显示时能正常捕获外,当连续向左滚动之后显示的 Slide1 页上点击就没效果了。同样,向右滑动时,Slide2 上绑定的事件监听器也可能出现问题。


打开调试控制台查看页面元素,发现除了实际添加的两页轮播对应的 slide 元素之外,左边多了一个复制的 Slide2 元素,而右边则多了一个复制的 Slide1。


原来 Swiper 是通过在实际轮播页前后复制若干个页面来实现 loop(首尾相连循环滚动)效果的,联想到前面提到的问题现象,马上猜测是因为虽然复制了轮播页元素但 vue 所绑定的事件处理器却没有被复制。于是进一步查看了这个元素上绑定的事件监听器,果然如此。

找到的问题原因,那也就有头绪了。Swiper.js 自己其实也提供了一套事件绑定机制,我们只需要把原代码里 vue 指定绑定的事件监听器通过 Swiper 初始选项中绑定就好了。调整后的代码如下。

<template>
  <div id="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="i in 2" :key="i" :data-index="i">Slide {{ i }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'app',

  mounted () {
    const mySwiper = new Swiper('.swiper-container', {
      loop: true,
      on: {
        click: (e) => {
          const index = e.target.dataset.index
          console.log(`click slide ${index}`)
        }
      }
    })

    console.log(mySwiper)
  }
}
</script>

再次试用点击事件,一切正常了。


原文链接:segmentfault.com

上一篇:JS框架:Vue 的实用主义全解
下一篇:dart语言基础

相关推荐

  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rcbullets,项目约70%的代码基于rcbullets,首先要感谢这个项目的作者,如...

    2 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    (/public/upload/f204a3b224d986128f1b4d9b8d06cd17) 前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Git...

    15 天前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    8 个月前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(https://cli.vuejs.org/zh/guide/installation.html)》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    8 个月前
  • 黄金搭档 -- JS 装饰器(Decorator)与Node.js路由

    很多面对象语言中都有装饰器(Decorator)函数的概念,Javascript语言的ES7标准中也提及了Decorator,个人认为装饰器是和一样让人兴奋的的变化。

    1 年前
  • 麻烦把JS的事件环给我安排一下!!!

    上次大家跟我吃饱喝足又撸了一遍PromiseA,想必大家肯定满脑子想的都是西瓜可乐...... 什么西瓜可乐!明明是Promise! 呃,清醒一下,今天大家搬个小板凳,听我说说JS中比较有意思的事...

    2 年前
  • 高效遍历匹配Json数据,避免嵌套循环

    工作中经常会遇到这样的需求: 1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态 2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态 3.等等.......

    2 年前
  • 验证库对Node.js [关闭]

    George Baileyajsie(https://stackoverflow.com/users/463304/georgebailey)提出了一个问题:Validation library fo...

    2 年前
  • 飞镖语言对JavaScript(节点JS)的好处是什么[关闭]

    bitekPhil Hannent(https://stackoverflow.com/users/313113/bitek)提出了一个问题:What is the benefit of the Da...

    2 年前
  • 项目中常用js封装(持续更新)

    我们日常开发中经常会碰到各种各样的需求,但很多需求都是重复的,因此我就把平时开发中遇到的一些常见方法做了个总结和归纳。 1、金额的格式化 比如2.00,1,222,2.00像这样格式的数据在很多电商...

    1 年前

官方社区

扫码加入 JavaScript 社区