解决方法: 在返回时重新开启轮播

组件中:

<swiper :options="swiperOption" ref="mySwiper" :class="ifSlide?'':'swiper-no-swiping'">
<swiper-slide v-for="(picitem,index) in swiperList" :key="index">
<img :src="picitem.imgpath" :gid="picitem.gid" :type="picitem.type" :bigsort="picitem.bigsort" alt="" style="display:inline-block;width:100%;height:100%;">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>

data中:

option:{
notNextTick: true,
loop: true,
autoplay: 3000,
speed: 800,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
autoplayDisableOnInteraction: false,
pagination: '.swiper-pagination',
paginationClickable: true,
mousewheelControl: true,
observer: true, //启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
observeParents: true,
debugger: true
},
swiperOption:{ }
created() {
this.initSwiper();
},
methods:{
initSwiper: function() {
this.swiperOption = option;
}
}

vue swiper点击后返回不能自动播放的更多相关文章

  1. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  2. swiper移动端全屏播放动态获取数据

    html:  <link rel="stylesheet" href="css/swiper.min.css">   <div class=& ...

  3. js原生选项卡(自动播放无缝滚动轮播图)二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  4. 仿微博视频边下边播之滑动TableView自动播放-b

    Tips:这次的内容分为两篇文章讲述01.[iOS]仿微博视频边下边播之封装播放器 讲述如何封装一个实现了边下边播并且缓存的视频播放器.02.[iOS]仿微博视频边下边播之滑动TableView自动播 ...

  5. javascript焦点图自动播放

    这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. [JavaScript] audio在浏览器中自动播放

    audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...

  7. 微信h5,背景音乐自动播放

    移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...

  8. AdapterViewFlipper功能 自动播放的图片库

    案例中有"上一个""下一个""自动播放",但是我觉得可以更加完善一下,点击自动播放,按钮变成"停止播放",在按" ...

  9. JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. vue解决sass-loader的版本过高导致的编译错误

    Module build failed: TypeError: this.getResolve is not a function at Object.loader (E:\appEx\PreRese ...

  2. cvErode和cvDilate腐蚀和膨胀函数

    Erode腐蚀,Dilate膨胀,这两个形态学函数总是成对出现,前者可以消除较小独点如噪音,后者可以使不连通的图像合并成块. void cvErode( const CvArr* src, CvArr ...

  3. this 、typeof、false、parseInt()、this、arguments、Array和object判断

    typeof typeof (undefined) 不会报错 undefined object Number boolean function String 返回值为字符串类型 false .fals ...

  4. vue(1) 第一个例子

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. Android开发 retrofit入门讲解

    前言 retrofit基于okhttp封装的网络请求框架,网络请求的工作本质上是 OkHttp 完成,而 retrofit 仅负责网络请求接口的封装.如果你不了解OKhttp建议你还是先了解它在来学习 ...

  6. merge存储引擎基本介绍和使用规范说明

    [以下两段截自MySql手册]: merge存储引擎,也被认识为mrg_myisam引擎,是一个"相同“的表可以被当作一个表来用的myisam表的集合.“相同”意味着所有表同样的列和索引信息 ...

  7. SQL Server - Store procedure 如何返回值

    存储过程 返回值 procedure return values : http://www.cnblogs.com/SunnyZhu/p/5542347.html return.select.outp ...

  8. 解决Delphi 2010启动时卡死并报displayNotification堆栈溢出错误

    1. 清理IE的历史记录,删除浏览器缓存(不需要清cookie) 2. 禁用startpage 2.1 从 Delphi 2010 启动菜单上点右键 -> 查看属性->快捷方式->目 ...

  9. Java并发编程中的若干核心技术,向高手进阶!

    来源:http://www.jianshu.com/p/5f499f8212e7 引言 本文试图从一个更高的视角来总结Java语言中的并发编程内容,希望阅读完本文之后,可以收获一些内容,至少应该知道在 ...

  10. <数据可视化>Matplotlib(2D+3D)

    1.Matplotlib介绍(2D) Matplotlib 是 Python 2D-绘图领域使用最广泛的套件.它能让使用者很轻松地将数据图形化,并且提供多样化的输出格式. pylab 是 matplo ...