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

组件中:

<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. 关于soapui如何做安全测试

    1.首先安装soapui5.1.2 第一步:运行SoapUI-Pro-x32-5.1.2_576024.exe文件,按照步骤安装成功: 第二步:拷贝Protection-4.6.jar到soapui安 ...

  2. spring整合Quartz框架过程,大家可以参考下

    这篇文章详细介绍了spring集成quartz框架流程,通过示例代码进行了详细说明,对学习或任务有参考学习价值,并可供需要的朋友参考. 1.quartz框架简介(m.0831jl.com) quart ...

  3. 校园商铺-4店铺注册功能模块-4Dto之ShopExecution的实现

    1. DTO:添加店铺的返回类型 问题:为什么不直接用实体类Shop呢? 原因:在操作Shop的时候,必然会有一个状态.添加店铺,添加成功,还是添加失败? 如果添加失败,失败是一个什么状态,这些都是要 ...

  4. thinkphp 模板渲染

    模板定义后就可以渲染模板输出,系统也支持直接渲染内容输出,模板赋值必须在模板渲染之前操作. 大理石平台价格表 渲染模板 渲染模板输出最常用的是使用display方法,调用格式: display('[模 ...

  5. System.Configuration.ConfigurationManager.cs

    ylbtech-System.Configuration.ConfigurationManager.cs 1.程序集 System.Configuration, Version=4.0.0.0, Cu ...

  6. MongoDB后台运行

    文章目录 命令方式(推荐) 命令行和配置文件方式 命令行: 配置文件: 命令方式(推荐) 如果想在后台运行,启动时只需添加 --fork函数即可. fork: 以守护进程的方式运行MongoDB. 指 ...

  7. SSL和TLS漏洞验证

    工具下载:git clone https://github.com/drwetter/testssl.sh.git 实验环境:192.168.1.22(bee-box v1.6) 192.168.1. ...

  8. PAT甲级——A1131 Subway Map【30】

    In the big cities, the subway systems always look so complex to the visitors. To give you some sense ...

  9. 面试系列25 dubbo的spi思想是什么

    spi,简单来说,就是service provider interface,说白了是什么意思呢,比如你有个接口,现在这个接口有3个实现类,那么在系统运行的时候对这个接口到底选择哪个实现类呢?这就需要s ...

  10. Amazon AWS EC2存储