vue-awesome-swiper 中 点击事件无效处理方案

最新推荐文章于 2024-05-14 16:15:15 发布
原创 最新推荐文章于 2024-05-14 16:15:15 发布 · 7.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue-awesome-swiper #vue-awesome-swiper 中 点击事件无效处理方

本文介绍在使用vue-awesome-swiper插件的loop模式时，如何解决动态数据循环下的点击事件失效问题。通过在Vue实例的created钩子中绑定vm，利用realIndex属性实现事件的有效触发。

最新做项目使用了 vue-awesome-swiper（3.1.3版本）轮播插件  

在使用loop模式下 动态循环数据   点击事件不起作用   通过查看api  loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 不会带上事件的   所以不能在dom上 直接绑定事件   绑定则无效

处理方案：如下图

上图中  我的vm怎么获取呢  我们可以在顶层定一个  var vm=null

然后在钩子created下  复制 vm=this;此时vue实例就指向了 vm;

有了  realIndex 这个下标   剩下的处理 就可以在 this.handleClickSlide(realIndex)这个方法里面进行了  .......

听明白了吗  不明白可以评论联系我 ......

vue-swesome-swiper 轮播图点击无效
ycx4567的博客
09-24 803
原因是开启了(loop:true) 开启loop, 在DOM结构上，swiper是使用的clone的方式，在首尾各添加一个slide单元。但是并没有将click事件clone过去，所以点击事件不会生效，解决方法，在回调添加点击事件，用dataset.index拿到数据； 结构 //结构 <swiper :options="swiperOption" ref="mySwiper" > ...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
总之，vue-awesome-swiper 是 Vue.js 开发者在实现轮播图功能时的一个强大工具，它使得在 Vue 应用中集成 Swiper 变得简单而高效。通过熟练掌握它的用法，可以提高开发效率，提升用户体验。如果你在使用过程中遇到...
swiper组件点击事件失效的问题
weixin_50166856的博客
08-16 2592
当swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作无效；**问题：**当我直接在swiper组件里的div上放@click事件时，点击事件偶尔会失效；将点击事件以下代码放进swiperOption里。
vue-awesome-swiper或swiper点击事件失效问题解决
云中客的博客
05-15 5236
注：代码使用vue-awesome-swiper开发，而vue-awesome-swiper也是将swiper进行封装，二者遇到的问题、解决思路一致，只是写法上略有不同。出现点击失效的原因：在loop模式下，超出实际数量的轮播项实际上是被复制出来的，是swiper虚拟slide进行填充，对这些虚拟slide元素进行操作无效。在开发项目时，遇到了需要实现在轮播模式下（loop:true）点击元素事件的需求，在多次踩坑后，总结记录到这篇文章中，希望对遇到这个问题的同行有所帮助。3.获取到html自定义属性。
vue引用vue-awesome-swiper使用loop:true时点击事件失效问题处理
qq_37866866的博客
04-28 1087
vue引用vue-awesome-swiper使用loop:true时点击事件失效问题处理处理方式一（）处理方式二 Swiper的API文档：API链接 个人使用的swiper版本为3.1.1，个人建议使用3.1.1，使用人数最多，避免踩更多的坑 处理方式一（） 利用swiper中v-for内的控件，将数据以属性的形式保存的内部dom上，再利用swiper的点击事件得到当前的dom，通过dom的v.target.getAttribute找到当前dom想要传递的数据。 <div class="lunbo
vue-awesome-swiper的点击事件
林剑河的博客
04-15 2063
swiper的普通点击事件不管用，需要单独重写 1、swiperOption swiperOption: { loop: false, slidesPerView: '3', spaceBetween: 24, centeredSlides: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-bu
vue引入新版 vue-awesome-swiper插件填坑问题
11-27
本文介绍了关于新版 vue-awesome-swiper，分享给大家，具体如下： 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放？ 为什么我的vue-awesome-...
vue轮播图插件vue-awesome-swiper的使用代码实例
12-02
在你的Vue组件模板中，你可以使用`<swiper>`和`<swiper-slide>`组件来创建轮播图。例如： ```html <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="item in items"></swiper-slide> ...
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
10-16
使用时需要先安装`vue-awesome-swiper`，然后在需要使用轮播的组件中通过`import`语句引入`swiper`和`swiper-slide`组件，并在`components`选项中注册它们。 配置Swiper组件时，我们通常在`<template>`中使用`...
vue-awesome-swiper之点击事件
weixin_45346457的博客
05-07 3635
当 swiper 开启 loop 属性实现循环轮播，同时用 vue 的事件绑定语法为每个轮播页绑定事件，当轮播到特定的页面时绑定的事件无法被正常监听。 原因：Swiper 是通过在实际轮播页前后复制若干个页面来实现 loop（首尾相连循环滚动）效果的，因为虽然复制了轮播页元素但 vue 所绑定的事件处理器却没有被复制。 解决方案：Swiper.js本身提供了一套事件绑定机制，只需要把原代码里 vue 指定绑定的事件监听器通过 Swiper 初始选项中绑定就好了。调整后的代码如下： data() {.
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
12-08
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper？！ vue-awesome-swiper就是其中一个前辈们产出的结晶。就看首尾两个单词，就知道他是vue和swiper的爱情之子了。 vue-awesome-swiper官网是中文文档，妈妈再也不用担心我读api啦。“基于 Swiper4、适用于 Vue 的轮播组件”。在产品催着进度的紧张环境下，在四处搜寻解决方案的情况下，这句话简直发着光啊。 具体怎么用，官方文档写的很清楚，但我还是想记录下来，好再普及一波。 一、天才第一步，这里没有纸尿裤（(⊙﹏⊙) 好像暴露了年龄…） 准备一个基于vue
swiper 点击事件失效问题
最新发布
weixin_55932347的博客
05-14 3132
在刚开始使用是 swiper 时，点击事件有时失效，这些个问题的原因是：swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作是无效的。当然这样往往不符合我们的要求（我们当然既要又要啦），下面的方法可以解决loop为true时点击事件对于每一个展现出来的轮播图都生效。使用html自定义属性传值时，属性必须要data-开头，在data-之后必须要有字符串，且因为大小写会失效，所以多单词时建议用“-”连接。通过html属性的方式传递给swiper包裹的子元素。
swiper轮播过程中点击事件无效
月下lk山人的博客
09-26 4655
问题：使用三方组件swiper轮播的过程中，点击轮播的部分内容，会出现事件无效的问题。原因在于，swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作无效。
img图片不在div中_正确在Vue中使用awesome-swiper；解决点击不生效的问题
weixin_39758618的博客
12-01 362
到处都是坑，坑，坑1、之前的写法是在data中配置swiperOption属性；出现的问题是，当图片“滑动起来后”有的图片点击事件并不生效；后来一查才知道，当loop为true时，会自动补充虚拟的DOM；在该DOM上Vue中的事件无法触发！2、模仿下面的网址，改造原来的轮播图时出现的问题，点击当前图片的时index值没有对应上，因为我的页面是想点击图片然后跳到对应的url,结果没想到出现“页面丢失...
reactjs 中运用swiper 插件时 点击事件失效问题
czq0312的博客
07-17 3449
在reactjs 中运用swiper 相关的插件（包括swiper.js,react-swiper,以及react-id-swiper）会出现点击事件失效的问题，那么问题出现在哪里呢？ 先上正常的逻辑代码 return ( <Swiper {...params} > {that.props.bannerData.map((item,ind
vue-awesome-swiper使用自动轮播和循环轮播不生效
liuyan55的专栏
02-15 3424
vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay) 在项目中使用vue-awesome-swiper如果loop和autoplay总是出现各种问题,第一次加载的时候,轮播是不动的,需要重新加载一下swiper才会轮播 解决方案: //轮播设置 swiperOption: { 　　direction: 'vertical', 　　observe...
解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper“: “^3.1.0）
热门推荐
西门吹雪
11-21 1万+
解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper”: "^3.1.0） 最新做项目使用了 vue-awesome-swiper（3.1.0版本）轮播插件遇到的坑。 在使用loop: true模式下： 动态循环数据 ，轮播第一遍是点击事件是正常的，轮播第二遍的时候点击事件就失效了 点击事件不起作用 通过查看api , loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 元素不会带上之前的绑定事件的 ,
vue项目中使用swiper时，部分按钮无法点击
yh8899abc的博客
05-28 1446
vue项目中使用swiper组件后，无法点击的问题的解决方案问题描述问题原因（个人总结分析）解决办法方法1 给swiper绑定点击事件方法2 事件委托监听总结 问题描述 如图视频轮播图，使用swiper插件，部分视频轮播图上的按钮（放大及叉号）无法点击 问题原因（个人总结分析） swiper在轮播的时候，为了保证轮播的连贯性，会复制一份数据源放在数组里面，也就是两份数据在页面上渲染，但他能只能复制DOM属性，但不能复制DOM事件，造成一部分Dom元素是没有绑定的点击事件的，导致无法点击 解决办法 方法1
vue中使用轮播图插件vue-awesome-swiper 循环轮播不起作用问题解决
baidu_41601299的博客
03-21 2303
在vue项目中经常会用轮播图，我一般用vue-awesome-swiper这个插件。我们轮播图片一般通过后端获取，循环展示，但会出现循环轮播失效的问题。原因是循环还没有完的时候swiper组件运行冲突出错导致的，在swiper组件上对数据价格v-if就可以解决。代码如下： <template> <div class="banner"> <swiper v-...
vue-awesome-swiper swiper-slide点击事件
03-02
vue-awesome-swiper是一个基于Vue.js的轮播组件，它是对Swiper的封装和扩展。swiper-slide是vue-awesome-swiper中的一个组件，用于展示轮播项。要给swiper-slide添加点击事件，可以通过以下步骤实现： 1. 首先，在你的Vue组件中引入vue-awesome-swiper和swiper-slide组件： ```javascript import { swiper, swiperSlide } from 'vue-awesome-swiper' ``` 2. 在template中使用swiper和swiper-slide组件，并给swiper-slide添加@click事件： ```html <swiper> <swiper-slide v-for="(item, index) in items" :key="index" @click="handleSlideClick(item)"> <!-- 轮播项内容 --> </swiper-slide> </swiper> ``` 3. 在methods中定义handleSlideClick方法来处理点击事件： ```javascript methods: { handleSlideClick(item) { // 处理点击事件的逻辑 } } ``` 这样，当用户点击swiper-slide时，handleSlideClick方法会被调用，并传入对应的item参数。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值