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 ...
随机推荐
- 搜索框下面显示提示数据(数据是ajax读取)
1.前台页面 <div style="margin: 0 auto"> <input type="text" id="wenxian ...
- note : Get FilePathName from FILE_OBJECT
转自:http://blog.csdn.net/lostspeed/article/details/11738311 封了一个函数, 从 FILE_OBJECT 中 得到 FilePathName 在 ...
- 数据库的元数据抽取SQL
一.数据库驱动类.端口.默认用户名密码 数据库 驱动 端口 用户名 密码 MySQL com.mysql.jdbc.Driver 3306 root root DB2 com.ibm.db2.jcc. ...
- R语言 包
R语言包 R语言的包是R函数,编译代码和样本数据的集合. 它们存储在R语言环境中名为"library"的目录下. 默认情况下,R语言在安装期间安装一组软件包. 随后添加更多包,当它 ...
- thinkphp 包含文件
在当前模版文件中包含其他的模版文件使用include标签,标签用法: <include file='模版表达式或者模版文件1,模版表达式或者模版文件2,...' /> 博智达直线电机价格 ...
- 数据提取--JSON
什么是数据提取? 简单的来说,数据提取就是从响应中获取我们想要的数据的过程 非结构化的数据:html等 结构化数据:json,xml等 处理方法:正则表达式.xpath 处理方法:转化为python数 ...
- Eclipse中servlet简易模版
package ${enclosing_package}; import java.io.IOException; import javax.servlet.ServletException; imp ...
- Hadoop yarn任务调度策略介绍
二.Capacity Scheduler(容器调度器)的配置 2.1 容器调度介绍 Capacity 调度器允许多个组织共享整个集群,每个组织可以获得集群的一部分计算能力.通过为每个组织分配专门的队列 ...
- Hexo 博客图片添加至图床---腾讯云COS图床使用。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 腾讯云官网 登录注册 创建存储桶 进入上面的存 ...
- 最全的机器学习&深度学习入门视频课程集
资源介绍 链接:http://pan.baidu.com/s/1kV6nWJP 密码:ryfd 链接:http://pan.baidu.com/s/1dEZWlP3 密码:y82m 更多资源 ...