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 ...
随机推荐
- Java 字符编码(二)Java 中的编解码
Java 字符编码(二)Java 中的编解码 java.nio.charset 包中提供了一套处理字符编码的工具类,主要有 Charset.CharsetDecoder.CharsetEncoder. ...
- python 常忘代码查询 和autohotkey补括号脚本和一些笔记和面试常见问题
笔试一些注意点: --,23点43 今天做的京东笔试题目: 编程题目一定要先写变量取None的情况.今天就是因为没有写这个边界条件所以程序一直不对.以后要注意!!!!!!!!!!!!!!!!!!!!! ...
- 在anguler项目中引用fullCalendar
1.css文件引用 <link href="/CSS/Fullcalendar.css" rel="stylesheet" /> <!--插件 ...
- 数据结构C语言版-栈
#include <stdio.h> #include <stdlib.h> #include <math.h> #include <iostream> ...
- CentOS 7 rabbitmq 安装
OS版本:CentOS 7.2Rrlang:19.2RabbitMQ:3.6.6 1.1 erlang安装 1. http://www.erlang.org/下载erlang,解压缩,进入目录,检查环 ...
- elasticsearch中 refresh 和flush区别(转)
elasticsearch中有两个比较重要的操作:refresh 和 flush refresh操作 当我们向ES发送请求的时候,我们发现es貌似可以在我们发请求的同时进行搜索.而这个实时建索引并可以 ...
- C语言的转义字符
原文地址:http://blog.163.com/sunshine_linting/blog/static/44893323201181325818165/ 在字符集中,有一类字符具有这样的特性:当从 ...
- ASP.NET获取POST提交过来的数据流,转换成Json格式的字符串
public class Public { private static Public _instance = new Public(); /// <summary> /// 全局访问点 ...
- 可遇不可求的Question之Mysql在不重启服务的情况下修改运行时变量篇
比方说在一些实际生产环境中,想改个MYSQL的配置,但是又不想停止服务重起MYSQL,有什么办法呢?使用SET命令可以做到,请看下面几个例子: 1.设置key_buffer_size的大小为10M. ...
- HDU - 1241 Oil Deposits 经典dfs 格子
最水的一道石油竟然改了一个小时,好菜好菜. x<=r y<=c x<=r y<=c x<=r y<=c x<=r y<=c #include ...