vue swiper点击后返回不能自动播放
解决方法: 在返回时重新开启轮播
组件中:
<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点击后返回不能自动播放的更多相关文章
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- swiper移动端全屏播放动态获取数据
html: <link rel="stylesheet" href="css/swiper.min.css"> <div class=& ...
- js原生选项卡(自动播放无缝滚动轮播图)二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
- 仿微博视频边下边播之滑动TableView自动播放-b
Tips:这次的内容分为两篇文章讲述01.[iOS]仿微博视频边下边播之封装播放器 讲述如何封装一个实现了边下边播并且缓存的视频播放器.02.[iOS]仿微博视频边下边播之滑动TableView自动播 ...
- javascript焦点图自动播放
这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- [JavaScript] audio在浏览器中自动播放
audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...
- 微信h5,背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...
- AdapterViewFlipper功能 自动播放的图片库
案例中有"上一个""下一个""自动播放",但是我觉得可以更加完善一下,点击自动播放,按钮变成"停止播放",在按" ...
- JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- JS对象 神奇的Math对象,提供对数据的数学计算。注意:Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别
Math对象 Math对象,提供对数据的数学计算. 使用 Math 的属性和方法,代码如下: <script type="text/javascript"> var m ...
- python ORM框架:SqlAlchemy
ORM,对象关系映射,即Object Relational Mapping的简称,通过ORM框架将编程语言中的对象模型与数据库的关系模型建立映射关系,这样做的目的:简化sql语言操作数据库的繁琐过程( ...
- Yii2 在php 7.2环境下运行,提示 Cannot use ‘Object’ as class name
出错原因是: Object是php7.2中的保留类名,不可以使用Object作为类的名称. The object name was previously soft-reserved in PHP 7. ...
- PHP缓存技术的应用1
// 自定义缓存类 class Cache_Filesystem { // 缓存写保存 function set ($key, $data, $ttl) { //打开文件为读/写模式 $h = fop ...
- Myeclipse从外部导入项目时,jsp和html页面中所有的onclick="return xx()"位置均出现cannot return from outside function() or method()错误
- svg实现渐变进度圆环
效果图 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="ut ...
- csp-s模拟测试80(b)
csp-s模拟测试80(b) 水题没什么可写的. $T1SB$规律题正解调了仨小时就过了. $T2SBDp$题颓完题解就秒了. $T3SB$数据结构考场想到正解就弃了,考后太懒一半正解一发随机化就A了 ...
- 求1到n这n个整数间的异或值 (O(1)算法)
问题:求1到n这n个整数间的异或值,即 1 xor 2 xor 3 ... xor n 记 f(x, y) 为x到y的所有整数的异或值. 对 f(2^k, 2^(k+1) -1) (注意文章中的 ...
- 软件-开发软件:Android Studio
ylbtech-软件-开发软件:Android Studio Android Studio 是谷歌推出的一个Android集成开发工具,基于IntelliJ IDEA. 类似 Eclipse ADT, ...
- (转) Mac下面的SecureCRT(附破解方案) 更新到最新的7.3.7
Mac下面的SecureCRT(附破解方案) 更新到最新的7.3.7 转自 http://blog.csdn.net/skykingf/article/details/17450561 http:// ...