用vue-awesome-swiper实现轮播图, 点击事件不生效

最新推荐文章于 2023-07-25 14:30:30 发布

原创最新推荐文章于 2023-07-25 14:30:30 发布 · 9.3k 阅读

1 ·

CC 4.0 BY-SA版权

Framework 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了使用Swiper实现轮播图时遇到的点击事件失效问题，尤其是在开启loop选项后，部分图片在切页后无法响应点击。文章提供了两种解决方案：关闭loop选项或在Swiper的点击回调中处理点击事件。

在项目里使用swiper实现轮播图效果把点击事件挂到图片或者swiper上在切页之后, 或者轮播到次轮之后, 有的图片无法点击
原因是开启了(loop:true) 开启loop, 在DOM结构上，swiper是使用的clone的方式，在首尾各添加一个slide单元。可能会带来一些不可预知的问题,

建议把loop关闭, 或者把点击事件也到swiper点击回调里

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

北京大雨

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue swiper点击按钮轮播失效，按F12弹出编辑器后才有效

z772330927的博客

07-14

2539

Vue swiper点击按钮轮播失效，按F12弹出编辑器后才有效我们在使用swiper的时候经常会跟其他框架一起使用，比如Vant,iview。有时候回遇到跟其他框架中的组件一起使用时，swiper的点击效果，轮播都不能正常使用，但是仅仅使用swiper时却能正常轮播。有时候会报无法找到$swiper的错误，就拿swiper中的thumb功能和iview中的Modal组件来说 swiper中的thumb功能和iview中的Modal组件 swiper中的thumb在vue中使用的基础代码 <temp

vue-swesome-swiper 轮播图点击无效

ycx4567的博客

09-24

806

原因是开启了(loop:true) 开启loop, 在DOM结构上，swiper是使用的clone的方式，在首尾各添加一个slide单元。但是并没有将click事件clone过去，所以点击事件不会生效，解决方法，在回调添加点击事件，用dataset.index拿到数据；结构 //结构 <swiper :options="swiperOption" ref="mySwiper" > ...

参与评论您还未登录，请先登录后发表或查看评论

vue awesome swiper 轮播图 循环不了无法自动播放 loop无效 autoplay无效蓝圈解决办法

weixin_42899305的博客

11-03

1454

vue awesome swiper 轮播图循环不了无法自动播放 loop无效 autoplay无效解决办法出现问题： 1.轮播图无法自动播放 2.swiper-opagination为蓝色圈如何变成白色圈 3.loop无效解决办法： 1.autoplay:{ delay:1500, disableOnInteraction:false }, 2.用代码块的样式 3.需要在swiper...

vue项目使用swiper后边轮播组件点击不起作用

卡卡西：一个擅长拷贝的前端程序员

03-23

1785

vue项目使用swiper轮播，后边的轮播组件点击不起作用

不可点击的轮播图

weixin_30502965的博客

07-07

136

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/*overflow:hidden的作...

Vue使用vue-awesome-swiper实现轮播,loop模式下,前一个项目的点击事件失效

前端开发小白9527

09-11

2194

Vue使用vue-awesome-swiper实现轮播，loop模式前一个项目点击事件失效，解放方法

使用vue-awesome-swiper不能自动轮播

front的博客

11-27

1561

问题图片不能自动轮播原因 vue-awesome-swiper是在swiper上做的一个封装，所以它的版本不是紧跟swiper的，有一个代差。我遇到的问题解决方案： vue-awesome-swiper是4.1.1，把package里的swiper依赖从6.x改成5.4.5 如下图自动轮播配置 swiperOptions: { loop: true, autoplay: { disableOnInteraction: false, delay: 4000 } } 参考

使用vue-awesome-swiper轮播图插件中遇到的几个问题

liushun1223的博客

12-14

1281

项目中，有一个轮播图的效果，网上差了许多资料后，决定使用vue-awesome-swiper这个开源的vue轮播图插件。由于我需要使用coverFlow的效果，所以就去官网在线示例中寻找样例代码。官方样式示例。示范代码如下： <template> <div class="example-3d"> <swiper class="swiper" :options="swiperOption"> <swiper-slide>Slide 1

vue中使用vue-awesome-swiper做轮播，手动滑动、vue-router路由跳转和动态更新数据，导致自动轮播失效问题

qq_35893561的博客

02-25

3836

vue中使用vue-awesome-swiper做轮播，手动滑动和vue-router路由跳转，导致自动轮播失效问题前言问题一：手动滑动后，自动轮播失效问题二：vue-router路由跳转后再回到轮播图页面前言在做vue项目中使用vue-awesome-swiper插件做轮播图时，遇到的两个自动轮播失效问题，记录下来，也给遇到同样问题的小伙伴一个参考。问题一：手动滑动后，自动轮播失效 sw...

【vue-awesome-swiper】vue-awesome-swiper设置loop:true不起作用

Owen的博客

11-06

1038

一、问题描述开始用本地数据，轮播正常；后来用接口数据，就不能循环滑动了。二、问题原因页面渲染的时候，数据未加载完成。三、解决方案方法1、 v-if="list.length" <swiper ref="mySwiper" :options="swiperOption" v-if="list.length"> <swiper-slide v-for="item of list" :key='item.id'> <img

vue-awesome-swiper或swiper点击事件失效问题解决

云中客的博客

05-15

5256

注：代码使用vue-awesome-swiper开发，而vue-awesome-swiper也是将swiper进行封装，二者遇到的问题、解决思路一致，只是写法上略有不同。出现点击失效的原因：在loop模式下，超出实际数量的轮播项实际上是被复制出来的，是swiper虚拟slide进行填充，对这些虚拟slide元素进行操作无效。在开发项目时，遇到了需要实现在轮播模式下（loop:true）点击元素事件的需求，在多次踩坑后，总结记录到这篇文章中，希望对遇到这个问题的同行有所帮助。3.获取到html自定义属性。

Swiper轮播点击图片无反应bug修复

weixin_43999603的博客

06-09

713

Swiper 轮播点击无反应，第一张图片点击无反应，点击没有效果，点击bug

vue-awesome-swiper之点击事件

weixin_45346457的博客

05-07

3642

当 swiper 开启 loop 属性实现循环轮播，同时用 vue 的事件绑定语法为每个轮播页绑定事件，当轮播到特定的页面时绑定的事件无法被正常监听。原因：Swiper 是通过在实际轮播页前后复制若干个页面来实现 loop（首尾相连循环滚动）效果的，因为虽然复制了轮播页元素但 vue 所绑定的事件处理器却没有被复制。解决方案：Swiper.js本身提供了一套事件绑定机制，只需要把原代码里 vue 指定绑定的事件监听器通过 Swiper 初始选项中绑定就好了。调整后的代码如下： data() {.

vue中Swiper动态渲染swiper-slide后轮播图呆滞划不动的问题

smile的博客

07-25

1192

因项目开发中很多都有用到轮播图的地方，然后选择用了swiper，记录一下，之前一直没有发布这个文章，现在官方好像已经优化了这个问题。因为this.mySwiper中没有值导致的，需要进行swiper初始化一下。问题描述：在图片滑动时，卡住不动了。下载引入，具体参考官方文档。

swiper动态加载数据时,图片滑动滚动无效

TO_Web的博客

07-17

583

swiper 动态获取图片时,滚动滑动无效问题描述: 就是在动态获取图片后,把获取到的图片append到父级元素中时发现,没法滚动了. 方案1: 可以在添加父级元素后初始化swiper; 下面是我的代码片段 res.data.forEach(swiper => { swiperDom = `<div class="swiper-slide swiper-slide-center none-effect" data-swiperId="${swiper.id}"><img sr

swiper2轮播插件，点击图片后，轮播失效

※老鼠拧刀满街找猫※

10-26

815

一、问题用的是swiper2.x的版本，在实践过程中，发现在谷歌浏览器中，点击轮播图后，轮播失效。二、处理过程百度了一下，发现很多人的处理方式是添加如下配置： disableOnInteraction: false, 但是在我这里发现还是无效，虽然官网对这个配置的解释看起来是可以解决此问题的，但还是让人失望。最后，我的处理方法是这样的，既然是图片点击后才失效的，那么我们可不可以在点击图片后，重新调用自动播放的事件。于是有了如下写法： var mySwiper = ne

swiper轮播过程中点击事件无效

月下lk山人的博客

09-26

4666

问题：使用三方组件swiper轮播的过程中，点击轮播的部分内容，会出现事件无效的问题。原因在于，swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作无效。

vue-awesome-swiper最新版轮播图实战demo及参数详解

sxjit的博客

02-29

5214

vue-awesome-swiper是vue项目插件之一，用于开发轮播功能。它基于swiper轮播插件，由前辈所开发而出，奉上源仓库：https://github.com/surmon-china/vue-awesome-swiper 一、安装可以通过CDN或NPM(CNPM)安装。CDN有些繁琐，通常我们习惯npm(cnpm)下载安装： npm install vue-awesome-swip...

解决swiper图片无法滑动问题

chimee的博客

06-13

2201

今天在使用swiper做轮播时，自己新建html文件测试时使用没有问题，但是放进项目后出现图片无法滑动问题，最后还是在百度找到解决方案。出现问题原因： swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数，从而完成初始化，但是由于动态加载时在初始化之后的动作，所以导致无法滑动。解决方案： var mySwiper = new Swiper ('.swiper-container', { observer:true,//修改swiper自己或子元素时

vue-awesome-swiper swiper 通过refs 重置swiper

最新发布

05-22

### 如何通过 `refs` 在 vue-awesome-swiper 中重置 Swiper 实例在 Vue 项目中使用 `vue-awesome-swiper` 插件时，可以通过 `$refs` 获取到 Swiper 的实例并对其进行操作。以下是实现方法的具体说明： #### 使用 `$refs` 获取 Swiper 实例为了能够访问 Swiper 实例，在模板中的 `<swiper>` 组件需设置 `ref` 属性以便后续调用。例如： ```html <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(slide, index) in slides" :key="index">{{ slide }}</swiper-slide> </swiper> ``` 随后可以在组件的计算属性中定义一个函数来返回 Swiper 实例： ```javascript computed: { swiperInstance() { return this.$refs.mySwiper && this.$refs.mySwiper.swiper; } } ``` 此部分逻辑允许我们在任何生命周期钩子或事件处理程序中轻松获取 Swiper 实例[^3]。 #### 重置 Swiper 实例的操作流程当需要更新 Swiper 数据源或者重新初始化 Swiper 时，可以按照如下方式执行： 1. **销毁当前实例**：如果数据发生变化，则先销毁现有的 Swiper 实例。 2. **更新数据绑定**：修改影响 Swiper 渲染的数据模型。 3. **再次初始化 Swiper**：确保新的配置生效。具体代码示例如下所示： ```javascript methods: { resetSwiper(newData) { const swiper = this.swiperInstance; if (swiper) { // 销毁旧的 Swiper 实例 swiper.destroy(true, true); } // 更新数据源 this.slides = newData || []; // 延迟一段时间让 DOM 完成渲染后再初始化 Swiper this.$nextTick(() => { if (!this.swiperInstance) { console.error('Failed to reinitialize the Swiper instance.'); return; } // 手动触发初始化或其他自定义行为 this.swiperInstance.update(); }); } }, watch: { slides(newValue) { // 当滑块列表发生改变时自动调整布局 this.$nextTick(() => { const swiper = this.swiperInstance; if (swiper) { swiper.update(); // 刷新 Swiper 布局 } }); } } ``` 以上代码片段展示了如何安全地销毁现有实例以及加载新内容之后重新激活它[^3]。注意这里利用了 Vue 提供的 `$nextTick()` 方法以等待视图完成更新再继续下一步动作。另外需要注意的是，如果你只是简单替换了一些幻灯片而不需要完全重建整个轮播结构的话，那么仅调用 `update()` 就足够了；但如果涉及到更复杂的场景比如切换主题样式之类的可能还需要额外考虑其他因素。 ### 总结综上所述，要通过 `refs` 来控制和管理 `vue-awesome-swiper` 的实例对象，关键是掌握好其 API 接口的应用时机，并合理安排资源释放与分配过程。这样不仅可以提高用户体验还能减少不必要的性能开销。