一般的,如果是静态数据(本地数据),可以直接在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以及点击事件的更多相关文章

  1. vue项目中引入循环执行setInterval或者requestAnimationFrame的用法等

    项目中循环计时处理某些方法的情况还是比较常见的,一般会用setInterval来处理,但是这个方法会似的页面卡顿等使用体验不好. 所以就使用浏览器提供的requestAnimationFrame方法, ...

  2. Vue如何使用vue-awesome-swiper实现轮播效果

    在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...

  3. 实战:vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  4. vue中使用swiper-slide时,循环轮播失效?

    前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...

  5. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  6. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

  7. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

随机推荐

  1. Java 字符编码(二)Java 中的编解码

    Java 字符编码(二)Java 中的编解码 java.nio.charset 包中提供了一套处理字符编码的工具类,主要有 Charset.CharsetDecoder.CharsetEncoder. ...

  2. python 常忘代码查询 和autohotkey补括号脚本和一些笔记和面试常见问题

    笔试一些注意点: --,23点43 今天做的京东笔试题目: 编程题目一定要先写变量取None的情况.今天就是因为没有写这个边界条件所以程序一直不对.以后要注意!!!!!!!!!!!!!!!!!!!!! ...

  3. 在anguler项目中引用fullCalendar

    1.css文件引用 <link href="/CSS/Fullcalendar.css" rel="stylesheet" /> <!--插件 ...

  4. 数据结构C语言版-栈

    #include <stdio.h> #include <stdlib.h> #include <math.h> #include <iostream> ...

  5. CentOS 7 rabbitmq 安装

    OS版本:CentOS 7.2Rrlang:19.2RabbitMQ:3.6.6 1.1 erlang安装 1. http://www.erlang.org/下载erlang,解压缩,进入目录,检查环 ...

  6. elasticsearch中 refresh 和flush区别(转)

    elasticsearch中有两个比较重要的操作:refresh 和 flush refresh操作 当我们向ES发送请求的时候,我们发现es貌似可以在我们发请求的同时进行搜索.而这个实时建索引并可以 ...

  7. C语言的转义字符

    原文地址:http://blog.163.com/sunshine_linting/blog/static/44893323201181325818165/ 在字符集中,有一类字符具有这样的特性:当从 ...

  8. ASP.NET获取POST提交过来的数据流,转换成Json格式的字符串

    public class Public { private static Public _instance = new Public(); /// <summary> /// 全局访问点 ...

  9. 可遇不可求的Question之Mysql在不重启服务的情况下修改运行时变量篇

    比方说在一些实际生产环境中,想改个MYSQL的配置,但是又不想停止服务重起MYSQL,有什么办法呢?使用SET命令可以做到,请看下面几个例子: 1.设置key_buffer_size的大小为10M. ...

  10. HDU - 1241 Oil Deposits 经典dfs 格子

    最水的一道石油竟然改了一个小时,好菜好菜. x<=r  y<=c  x<=r  y<=c  x<=r  y<=c  x<=r y<=c #include ...