vue awesome swiper异步加载数据出现的bug问题


Posted in Javascript onJuly 03, 2018

本人第一次使用vue awesome。

踩到的坑确实不少。官网上面的用法写的很简单,按照上面做法基本会遇到如下这个问题

轮播第二次之后,首屏会自动跳过

网上找了很多资料,都不能解决这个问题。于是自己琢磨了很久终于灵光一闪。一个小技巧解决了这个问题。

使用方法应该很简单,去官网可以查看到方法。基本步骤如下

npm install vue-awesome-swiper --save-dev

在main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

在vue组件中

vue awesome swiper异步加载数据出现的bug问题

图中标红就是解决办法,因为swiper需要在数据加载之后初始化,但是vue swiper暂时并没有提供这个方法(也有可能是我不知道这个方法)所以当数据加载之后

vue awesome swiper异步加载数据出现的bug问题

这样即可解决首屏的问题!

下面贴上配置的代码

swiperOption:{
    loop:true,
    notNextTick: true,
    mousewheelControl: true,
    autoplayDisableOnInteraction:false,
    observer:true,//修改swiper自己或子元素时,自动初始化swiper
    observeParents:true,//修改swiper的父元素时,自动初始化swiper
    paginationClickable: true,
    autoplay : {
     delay:3000
    },
    observer:true,
    speed:300,
    pagination: {
     el: '.swiper-pagination',
     clickable: true
    }

再一个就是app中触屏滑动之后不能自动轮播的bug问题,已解决下面贴图

vue awesome swiper异步加载数据出现的bug问题

将disableOnInteraction设置为false即可

总结

以上所述是小编给大家介绍的vue awesome swiper异步加载数据出现的bug问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
深入学习JavaScript对象
Oct 13 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 #Javascript
js实现各浏览器全屏代码实例
Jul 03 #Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 #Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 #Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 #Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 #Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 #Javascript
You might like
PHP 函数学习简单小结
2010/07/08 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
修改发贴的编辑功能
2007/03/07 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
js 动态选中下拉框
2009/11/26 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
python单元测试unittest实例详解
2015/05/11 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python的几种主动结束程序方式
2019/11/22 Python
python 如何停止一个死循环的线程
2020/11/24 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
人事任命书格式
2014/06/05 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
营销总监岗位职责
2014/09/16 职场文书
期末考试复习计划
2015/01/19 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
python 爬取天气网卫星图片
2021/06/07 Python