vue中用swiper轮播框架loop：true时点击事件失效的解决方法

最新推荐文章于 2024-05-14 16:15:15 发布
最新推荐文章于 2024-05-14 16:15:15 发布
阅读量3.8k 收藏 4
点赞数 2
文章标签： swiper 点击无效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mrswater/article/details/91450892
版权

问题描述：swiper轮播是可以点击去查看详情的，swiper的loop属性是true，当我们点击第一张图片和向左滑动到最后一张点击时触发不了事件的

原因：因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

解决办法：就是不使用vue中的@：click进行操作，而是在swiper的回调函数中直接操作DOM，这样就可以很好的解决这一问题

前端wa
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue使用swiper.js重叠轮播组建样式
12-30
本文实例为大家分享了vue使用swiper.js重叠轮播组建样式，供大家参考，具体内容如下 <swiper class=swiper options=swiperOption> <swiper class=swiper-slide> 一起来观看 Wes Anderson的色彩回旋舞...
VUE 3D轮播图封装实现方法
01-19
本文为大家分享了VUE 3D轮播图封装的具体代码，供大家参考，具体内容如下 一、体验地址 VUE 3D轮播图 二、实现功能点 （1）、无缝轮播 （2）、进入变大、离开缩小（类3d切换效果） 三、js代码 <!--轮播图...
swiper loop:true失效
Mrswater的博客
06-11 5307
问题描述：在写vue项目的时候轮播用到swiper插件，里面有一个loop属性设置为true时，会循环轮播，一开始是自己本地模拟的数据是可以实现的，但是当调用接口获取来的数据发现并不能循环播放 原因：本地模拟的假数据是一直存在的，而后台获取的数据，页面dom一开始渲染的时候数据是为空的，所以导致不能循环播放 解决办法：当获取到数据的时候再渲染dom生成即可 ...
关于swiper插件设置 loop=true属性后点击事件失效问题
Akihi404的博客
04-15 246
直接上代码吧： 在mounted钩子里初始化：
swiper 点击事件失效问题
最新发布
weixin_55932347的博客
05-14 734
在刚开始使用是 swiper 时，点击事件有时失效，这些个问题的原因是：swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作是无效的。当然这样往往不符合我们的要求（我们当然既要又要啦），下面的方法可以解决loop为true时点击事件对于每一个展现出来的轮播图都生效。使用html自定义属性传值时，属性必须要data-开头，在data-之后必须要有字符串，且因为大小写会失效，所以多单词时建议用“-”连接。通过html属性的方式传递给swiper包裹的子元素。
Vue-Swiper解决轮播到最后一张停止
lihui61357457的博客
03-05 2642
1.sipwer的bug，如果数据是从网络上获取的，那么自动轮播到最后一张就会停止 2.解决方法在swiper组件上加上v-if="数据.length>0" <template> <swiper ref="mySwiper" :options="swiperOptions" class="banner" v-if="banners.length>0"> <swiper-slide v-for="value in banners" :key="value
Swiper列表轮播动态获取数据最后一页数据陷入死循环问题
wind_linjie的博客
06-04 1037
当获取数据时，在下方代码中添加loop:true；autoplay:true;会实现页面的动态循环;让循环的每一页显示6条数据，每次循环6条数据， 但是出现的问题是，当数据的数量少于或者大于的时候，就会出现轮播的时候最后显示的几条数据陷入死循环（无限循环最后几条数据）状态， 而造成这个死循环的原因就是数据的过多或过少，当数据显示的刚好是每一页的倍数是，比如6，数据有12条、18条、24条都不会出现问题，而当数据有15条或者20条的时候就会出现死循环的状态， 目前的解决方案就是需要将数据的数量控制在所需范围之
解决在vue中使用swiper loop失效的问题
qq_49278774的博客
06-17 5422
解决swiper 无法显示，无法切换下一页，循环数据不渲染
swiper轮播图loop循环失效bug解决（watch+nextTick）
a1071626267的博客
09-15 4006
swiper轮播图loop循环失效bug解决（watch+nextTick）
swiper在vue项目中loop循环轮播失效的解决方法
10-18
今天小编就为大家分享一篇swiper在vue项目中loop循环轮播失效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用swiper实现中间大两边小的轮播图效果
10-15
Vue.js是一个流行的前端框架，Swiper则是一个强大的滑动组件，适合构建轮播图、幻灯片和其他滑动内容。 首先，为了使用Swiper，我们需要在`index.html`文件中引入其CSS样式文件，例如`swiper.min.css`。这将确保...
解决swiper轮播图显示最后一张图片问题
LiuJingye123的博客
03-12 9453
解决swiper轮播图显示最后一张图片问题 在使用swiper进行轮播图制作使，如果是由空数组创建 data () { return { swiperList:[] } } &lt;swiper :options="swiperOption" &gt; &lt;!-- slides --&gt; &lt;swiper-slide ...
swiper在loop模式，当轮播到最后一张图时候，做其他事件
weixin_30650859的博客
06-20 1613
1、引入文件： <link rel="stylesheet" href="css/swiper.min.css"> <script src="js/swiper.min.js"></script> 2、style样式： html, body { position: relative; ...
swiper loop：true引发的问题及解决方法
热门推荐
HELLO WORD
02-24 2万+
swiper loop：true引发的问题 最近在准备面试，想到之前面试总是会被问到：遇到过哪些坑，都是怎么解决的。每每遇到这种问题我都很尴尬，因为一下子让你去想踩过的坑还真不太想的起来，一般我只有再次遇到同样的坑的时候才会记起，所以决定以这篇文章开始，认真记录自己遇到过的坑，以备不时之需！ 废话不多说，切入正题。 前段时间在写一个轮播的时候遇到了一个问题： 当swiper的loop...
vue中使用swiper-slide时，循环轮播失效？
weixin_42718460的博客
01-24 1641
vue中使用swiper-slide时，循环轮播失效？ 前言 　　vue 项目中使用时，组件swiper-slide 如果用v-for循环的话，loop：true 就不能无缝轮播，每次轮播到最后一张就停止了？？？ 正文 　　代码如下：　　 &lt;swiper :options="swiperOption2"&gt; &lt...
解决vue-swiper无法重复轮播的问题
qq_42252097的博客
08-22 1006
在做自己的项目的时候，发现引入swiper插件后，也配置了loop:true的属性，但是就是图片不重复轮播。 解决的方法是：在你的swiper标签的位置上，加一个v-if的指令，里面是总图片的长度，即可解决不能重复轮播的问题。 ...
使用h5 swiper的loop属性时候踩坑
u012439689的博客
11-03 1347
swiper 开启 loop 循环时，复制dom导致的复制的slide上的交互无效问题解决
【VUE】使用swiper时轮播失效的BUG-已解决
IU
08-09 1079
场景 使用swiper每次到最后一张就停止轮播了 设置的 loop: true 仿佛没有效果 原因 在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swiper组件并复制了sliper 解决 确保异步数据获取完 再显示swiper 用v-if判断. <swiper ref="mySwiper" :options="swiperOptions" style="height: 360px" v-if="lunbo.length"> </swiper>
vue中使用swiper设置loop循环播放时点击失效解决方案
sxs1995的博客
05-28 4122
问题 但是我们在给loop：true时轮播中的页面写点击事件，由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。 解决方法 我们可以不使用vue中的@：click进行操作，而是在swiper的回调函数中直接操作DOM，这样就可以很好的解决这一问题，实例如下： <swiper v-if="project.story" :...
vue使用swiper轮播切换页面
05-24
非常感谢您的提问，关于vue使用swiper轮播切换页面的问题，可以通过以下步骤实现： 1. 首先，需要安装swiper插件，可以使用npm命令进行安装：npm install swiper --save。 2. 在Vue组件中引入swiper插件，可以使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值