swiper在vue项目中的循环轮播bug以及点击事件
一般的,如果是静态数据(本地数据),可以直接在mounted生命周期中初始化,循环轮播、自动播放都比较正常。
但是,如果是动态从后台获取数据的话,采用上述方法会发现,轮播图无法自动播放,也无法拖拽。
解决办法:在从后台获取完数据之后再初始化swiper,同时启动动态检查器observer,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper,默认是false。这时候使用autoplay开启自动播放是可以的,
然而当加上loop让其循环播放时,会发现是有问题的。如果不要循环播放的话,上述方法勉强可行,但是如果想要自动播放与循环轮播同时生效的话,还得另寻他法。
解决方法:在获取完数据后,将swiper放在$nextTick下一个UI帧再初始化。
this.$nextTick(() => { // 下一个UI帧再初始化swiper
this.initSwiper();
});
然后在initSwiper方法中,完成swiper初始化,如:
initSwiper () {
const _this = this
var mySwiper = new Swiper ('.swiper-container1', {
loop: true,
autoplay:true,
observer:true,
observeParents:true,//修改swiper的父元素时,自动初始化swiper
autoplay: {
disableOnInteraction: false, // 手动滑动后继续自动播放
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
}
可以发现,现在这样是可以了,能够自动播放,也能循环播放,手指滑动后还能继续自动播放。
然而,如果我想点击banner,根据不同路径跳转到不同的页面,这个该怎么实现呢?第一想法肯定是在swiper-slide上绑定click事件,通过click事件获取跳转路径的同时完成页面跳转,本来是没啥大问题的,但是在循环轮播的情况下,第一次播放完毕,进行第二次播放的时候,点击第一个banner,会发现并没有获取到跳转路径,也就是说点击事件失效了。
查找了下问题所在,发现在 loop 开启的时候,dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click事件。
这时候我想到了swiper中的回调函数,click事件,那么上面的initSwiper事件就成这样了。
initSwiper () {
const _this = this
var mySwiper = new Swiper ('.swiper-container1', {
loop: true,
autoplay:true,
on:{
click: function(e){
let url = e.target.dataset.jumpurl // jumpurl是在swiper-slide中动态绑定的data-jumpUrl属性,值是从后台获取的跳转链接
_this.bannerJump(url)
},
},
observer:true,
observeParents:true,//修改swiper的父元素时,自动初始化swiper
autoplay: {
disableOnInteraction: false,
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
}
然后添加bannerJump事件:
bannerJump (url) {
window.location.href = url
}
到这里,一个自动播放、循环轮播、点击跳转的banner就大功告成了。
swiper在vue项目中的循环轮播bug以及点击事件的更多相关文章
- vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等
项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...
- Vue如何使用vue-awesome-swiper实现轮播效果
在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...
- 实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...
- vue中使用swiper-slide时,循环轮播失效?
前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。
问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
随机推荐
- python14 常用模块 二
一.json模块 强大:不同语言之间可以进行数据交换 序列化:把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serializati ...
- Python之路(第三十五篇) 并发编程:操作系统的发展史、操作系统的作用
一.操作系统发展史 第一阶段:手工操作 —— 真空管和穿孔卡片 第一代之前人类是想用机械取代人力,第一代计算机的产生是计算机由机械时代进入电子时代的标志,从Babbage失败之后一直到第二次世界大 ...
- java的多态性
class test1{ int a=3; public test1(int a) { this.a=a; } public void aa() { ...
- 检测2个url的不同之处(爬虫分析接口)
就是简单的检测2个url的不同之处,在做爬虫时,要分析接口地址的不同之处,靠自己的眼睛有点累,所以写了一个小程序,不喜勿喷 #测试数据 a = "https://list.tmall.com ...
- Python 3.6安装yaml时报"AttributeError: module 'pip' has no attribute 'main'"和“Non-zero exit code”错误
1.Python 3.6安装yaml时一开始报AttributeError: module 'pip' has no attribute错误,根据网上提供的解决方法修改Pycharm安装目录D:\Pr ...
- 对 JSON 数据进行序列化和反序列化
如何:对 JSON 数据进行序列化和反序列化 2017/03/30 作者 JSON(JavaScript 对象符号)是一种高效的数据编码格式,可用于在客户端浏览器和支持 AJAX 的 Web 服务之间 ...
- 低版本的Chrome,打开url时,报错,IE确可以打开;
解决办法:打开注册表,添加以下内容,之后重启服务器: [HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\HTTP\Parameters]Ena ...
- Codeforces 1091D New Year and the Permutation Concatenation 找规律,数学 B
Codeforces 1091D New Year and the Permutation Concatenation https://codeforces.com/contest/1091/prob ...
- 2019.03.09 codeforces833B. The Bakery(线段树优化dp)
传送门 线段树优化dpdpdp入门题. 要求把nnn个数分成kkk段,每段价值为里面不相同的数的个数,求所有段的价值之和最大值.n≤35000,k≤50n\le35000,k\le50n≤35000, ...
- temp--重庆农商行银联前置改造项目出差
2019年度 杨伟携程订郎菲酒店 158, 单人住一晚 (3.5晚), 杨伟招行信用卡 预授权 1000. 与方程一起住 1915房 (其实前台预授权是 1000-158 = 842) 3.6 ...