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获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
react组件基本用法示例小结
Apr 27 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
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 应用程序安全防范技术研究
2009/09/25 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
JS实现按比例缩小图片宽高
2020/08/24 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python中存取文件的4种不同操作
2018/07/02 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
python+pyqt5编写md5生成器
2019/03/18 Python
python list多级排序知识点总结
2019/10/23 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
本科生的职业生涯规划范文
2014/01/09 职场文书
便利店投资创业计划书
2014/02/08 职场文书
初级会计求职信范文
2014/02/15 职场文书
金融管理应届生求职信
2014/02/20 职场文书
生产车间标语
2014/06/11 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js