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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
Validform表单验证总结篇
Oct 31 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
javascript实现固定侧边栏
Feb 09 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投票系统防刷票判断流程分析
2012/02/04 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JavaScript 七大技巧(一)
2015/12/13 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
介绍Python中的__future__模块
2015/04/27 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python 检测图片是否有马赛克
2020/12/01 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
招聘专员岗位职责
2014/03/07 职场文书
追悼会主持词
2014/03/20 职场文书
班级文化标语
2014/06/23 职场文书
入股合作协议书
2014/10/12 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python