vue-awesome-swiper之点击事件_vue-awesome-swiper事件_c_reshape的博客-程序员信息网

技术标签： vue

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

原因：Swiper 是通过在实际轮播页前后复制若干个页面来实现 loop（首尾相连循环滚动）效果的，因为虽然复制了轮播页元素但 vue 所绑定的事件处理器却没有被复制。

解决方案：Swiper.js 本身提供了一套事件绑定机制，只需要把原代码里 vue 指定绑定的事件监听器通过 Swiper 初始选项中绑定就好了。调整后的代码如下：

data() {
    return {
      swiperOption: {
        loop: true, // 循环
        on: {
          click: (e) => {
            // 点击小图, 大图对应切换
            const index = this.pngListNoLabel.findIndex((i) => i.imgSrc === e.target.attributes.src.nodeValue);
            this.swiper.realIndex = index;
            this.swiper.activeIndex = index + 5;
            this.swiper.slideTo(index + 5);
            this.$emit('setBigIndex', index);
          },
        },
      },
    };
  },

本文链接：https://blog.csdn.net/weixin_45346457/article/details/116494267

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Layui之入门_layui.css_小刘学编程.的博客-程序员信息网

目录：一，关于Layui 1，什么Layui 2.layui，easyui与bootstrap的对比 2.1，layui和bootstrap对比（同属UI渲染框架） 2.2，layui和easyui对比 3，layui入门 3.1路径问题二，自定义模块三，json回顾四，layui实现登陆 4.1，构建实现登陆 4.2，主页搭建使用参考网址进入网

go第一讲：hello world_你所有承诺的博客-程序员信息网

语言之争就不说了，但凡是比较流行的语言，肯定有自己的优势，今天我们要说的是千家万晓的一个语言：go一：下载去官网下载（国内打不开）、各大资源网站下载、各交流群索取，我是想传一个资源到csdn，结果不让传二：安装和普通软件安装一样，一直下一步就行三：代码测试我们先建立一个代码空间Go_WorkSpace，用工具书写如下代码，并保存名为test.go的文件：packag

程序员的技术面_yesky12的博客-程序员信息网

开发语言:VC++(mfc/sdk/com/ActiveX)Delphi,VB,J2SE,EJB,JSP,J2ME,PERL技术特长:图形技术(2D/3D)数据库(Oracle/SqlServer)网络通信技术(winsock开发/串口通信)嵌入式技术(brew/wince/j2me)操作系统(Linux/solaris/AIX)web服务(weblogic/tomcat/Apache/webSp

嵌入式Web项目（四）——cJSON的引入与使用_cjson 嵌入式_Jacky~~的博客-程序员信息网

文章目录前言JSON与cJSON的区分JSON语法规则cJSON的引入与规则cJSON数据结构和设计思想JSON数据封装封装方法输出JSON数据封装数据与打印数据案例源码Makefile执行CJSON数据解析创建头指针解析整段JSON数据，并将链表头结点返回，赋值给头指针根据键值对的名称从链表中取出对应的值，返回该键值对的地址如果JSON数据的值是数组，使用下面的API提取数据解析JSON数据案例源码Makefile执行cJSON使用过程中的内存问题内存钩子使用cJSON_Hooks来连接自定义malloc

Linux中mv的作用是,linux中的mv命令的详细解释_weixin_39550587的博客-程序员信息网

linxu下的mv命令是一个常用命令，可以为文件或者目录重命名，下面由秋天网 Qiutian.ZqNF.Com小编为大家整理了linux的mv命令的详细解释的相关知识，希望对大家有帮助!一、linux中的mv命令的详细解释linux mv命令用来为文件或目录改名、或将文件或目录移入其它位置。语法mv [options] source destmv [options] source... direc...

layui table的使用及操作_艾小逗的博客-程序员信息网

layui table表格的使用方法及基本操作包含：开启复选框（获取选中数据），checkbox表格的重载，reload表格数据的操作需要引入layui.css / jquery.js / layui.js<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti...

随便推点

vue组件数据刷新_七已的博客-程序员信息网

在写一个小小评论展示页面的时候，分为了评论显示组件和按钮组件。但是遇到了点击按钮组件时，评论数据无法刷新的问题。方法一：将两个组件写为兄弟组件点击按钮组件时，this.$emit()触发父组件函数chagePage()，将修改的页数值传递给父组件，在chagePage()函数中链接数据库，将返回的数值传递给显示评论组件。方法二将两个组件写为父子组件评论显示组件为按钮组件的父组件...

【python报错】ImportError: DLL load failed while importing utilsextension: 找不到指定的模块。（完美解决办法）_python报错找不到指定的模块_指尖在键盘上舞动的博客-程序员信息网

例如：在终端中使用命令，出现以下报错信息（其他命令产生的该报错信息都可用以下方法解决）。