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

最新推荐文章于 2024-09-05 01:11:23 发布
最新推荐文章于 2024-09-05 01:11:23 发布
阅读量9.2k 收藏 1
点赞数 1
分类专栏： Framework
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Redcricket/article/details/80346325
版权

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

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

北京大雨
关注
专栏目录
vue项目使用swiper后边轮播组件点击不起作用
卡卡西：一个擅长拷贝的前端程序员
03-23 1693
vue项目使用swiper轮播，后边的轮播组件点击不起作用
Swiper轮播点击图片无反应bug修复
weixin_43999603的博客
06-09 581
Swiper 轮播点击无反应，第一张图片点击无反应，点击没有效果，点击bug
vue-swesome-swiper 轮播图点击无效
ycx4567的博客
09-24 722
原因是开启了(loop:true) 开启loop, 在DOM结构上，swiper是使用的clone的方式，在首尾各添加一个slide单元。但是并没有将click事件clone过去，所以点击事件不会生效，解决方法，在回调添加点击事件，用dataset.index拿到数据； 结构 //结构 <swiper :options="swiperOption" ref="mySwiper" > ...
已解决！vue2使用swiper的loop模式‘click‘错乱问题
最新发布
m0_60528790的博客
09-05 576
已解决！vue2使用swiper的loop模式'click'错乱问题，原理，找到点击的swiper-slide里的img的src作为关键find。
Vue swiper点击按钮轮播失效，按F12弹出编辑器后才有效
z772330927的博客
07-14 2457
Vue swiper点击按钮轮播失效，按F12弹出编辑器后才有效 我们在使用swiper的时候经常会跟其他框架一起使用，比如Vant,iview。有时候回遇到跟其他框架中的组件一起使用时，swiper的点击效果，轮播都不能正常使用，但是仅仅使用swiper时却能正常轮播。有时候会报无法找到$swiper的错误，就拿swiper中的thumb功能和iview中的Modal组件来说 swiper中的thumb功能和iview中的Modal组件 swiper中的thumb在vue中使用的基础代码 <temp
不可点击的轮播图
weixin_30502965的博客
07-07 113
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/*overflow:hidden的作...
使用vue-awesome-swiper不能自动轮播
front的博客
11-27 1448
问题 图片不能自动轮播 原因 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中使用vue-awesome-swiper做轮播 ，手动滑动、vue-router路由跳转和动态更新数据，导致自动轮播失效问题
qq_35893561的博客
02-25 3703
vue中使用vue-awesome-swiper做轮播 ，手动滑动和vue-router路由跳转，导致自动轮播失效问题前言问题一：手动滑动后，自动轮播失效问题二：vue-router路由跳转后再回到轮播图页面 前言 在做vue项目中使用vue-awesome-swiper插件做轮播图时，遇到的两个自动轮播失效问题，记录下来，也给遇到同样问题的小伙伴一个参考。 问题一：手动滑动后，自动轮播失效 sw...
使用vue-awesome-swiper轮播图插件中遇到的几个问题
liushun1223的博客
12-14 1170
项目中，有一个轮播图的效果，网上差了许多资料后，决定使用vue-awesome-swiper这个开源的vue轮播图插件。 由于我需要使用coverFlow的效果，所以就去官网在线示例中寻找样例代码。官方样式示例。 示范代码如下： <template> <div class="example-3d"> <swiper class="swiper" :options="swiperOption"> <swiper-slide>Slide 1
【在vue2中使用vue-awesome-swiper（4.1.1）】
qq_39883717的博客
12-28 864
因为this指向问题，在slideChange方法中，this指向的是swiper实例，无法直接调用vue方法。通过箭头函数来改变this指向，使其指向vue实例，再通过$refs获取对应的swiper对象，具体见如下代码。接口请求成功后，根据返回值设置swiper的initialSlide的索引。页面初始化时，swiper默认选中的图片要根据接口返回的值进行对应显示。通过监听swiper的索引，获取对应的数据，详见下面的代码。页面中任务内容，要根据滑动swiper更新相应的内容。
vue移动端使用swiper+vue-awesome-swiper实现滑动选择
Kätzchen-408的博客
07-27 1865
vue使用swiper+vue-awesome-swiper实现滑动选择踩坑提示1.源文档使用原生编写,不能直接写在vue里解决方案2.兼容性问题实现 先上效果图: 踩坑提示 1.源文档使用原生编写,不能直接写在vue里 swiper的文档写的太简陋了,虽然兼容vue,但是文档中给的样例是用原生html写的,把vue组件名放到样式类中了.原文档中,我要实现的功能的样例代码是这样: <!DOCTYPE html> <html lang="en"> <head> &l
vue-awesome-swiper之点击事件
weixin_45346457的博客
05-07 3415
当 swiper 开启 loop 属性实现循环轮播，同时用 vue 的事件绑定语法为每个轮播页绑定事件，当轮播到特定的页面时绑定的事件无法被正常监听。 原因：Swiper 是通过在实际轮播页前后复制若干个页面来实现 loop（首尾相连循环滚动）效果的，因为虽然复制了轮播页元素但 vue 所绑定的事件处理器却没有被复制。 解决方案：Swiper.js本身提供了一套事件绑定机制，只需要把原代码里 vue 指定绑定的事件监听器通过 Swiper 初始选项中绑定就好了。调整后的代码如下： data() {.
swiper动态加载数据时,图片滑动滚动无效
TO_Web的博客
07-17 496
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 654
一、问题 用的是swiper2.x的版本，在实践过程中，发现在谷歌浏览器中，点击轮播图后，轮播失效。 二、处理过程 百度了一下，发现很多人的处理方式是添加如下配置： disableOnInteraction: false, 但是在我这里发现还是无效，虽然官网对这个配置的解释看起来是可以解决此问题的，但还是让人失望。 最后，我的处理方法是这样的，既然是图片点击后才失效的，那么我们可不可以在点击图片后，重新调用自动播放的事件。于是有了如下写法： var mySwiper = ne
swiper轮播过程中点击事件无效
月下lk山人的博客
09-26 4288
问题：使用三方组件swiper轮播的过程中，点击轮播的部分内容，会出现事件无效的问题。原因在于，swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作无效。
vue-awesome-swiper最新版轮播图实战demo及参数详解
sxjit的博客
02-29 4693
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 2083
今天在使用swiper做轮播时，自己新建html文件测试时使用没有问题，但是放进项目后出现图片无法滑动问题，最后还是在百度找到解决方案。 出现问题原因： swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数，从而完成初始化，但是由于动态加载时在初始化之后的动作，所以导致无法滑动。 解决方案： var mySwiper = new Swiper ('.swiper-container', { observer:true,//修改swiper自己或子元素时
swiper 点击事件失效问题
weixin_55932347的博客
05-14 1923
在刚开始使用是 swiper 时，点击事件有时失效，这些个问题的原因是：swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作是无效的。当然这样往往不符合我们的要求（我们当然既要又要啦），下面的方法可以解决loop为true时点击事件对于每一个展现出来的轮播图都生效。使用html自定义属性传值时，属性必须要data-开头，在data-之后必须要有字符串，且因为大小写会失效，所以多单词时建议用“-”连接。通过html属性的方式传递给swiper包裹的子元素。
2022-05-24 工作记录--React-解决刷新页面后，swiper轮播图失效问题
weixin_48850734的博客
05-29 911
React-解决刷新页面后，swiper轮播图失效问题
vue-awesome-swiper实现循环轮播图
05-10
Vue-awesome-swiper是一个开源的轮播图插件，可以方便的实现循环轮播图。要实现循环轮播图，需要先安装Vue-awesome-swiper。可以通过npm命令进行安装：npm install vue-awesome-swiper --save。 安装完成后在Vue中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值