vue awesome swiper异步加载数据出现的bug问题
作者:Mythsool 时间:2024-05-03 15:10:58
本人第一次使用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组件中
图中标红就是解决办法,因为swiper需要在数据加载之后初始化,但是vue swiper暂时并没有提供这个方法(也有可能是我不知道这个方法)所以当数据加载之后
这样即可解决首屏的问题!
下面贴上配置的代码
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问题,已解决下面贴图
将disableOnInteraction设置为false即可
总结
以上所述是小编给大家介绍的vue awesome swiper异步加载数据出现的bug问题网站的支持!
来源:https://blog.csdn.net/Miss739999536/article/details/80323831
标签:vue,awesome,swiper
0
投稿
猜你喜欢
Python中的类与类型示例详解
2023-08-12 12:21:42
Pandas如何对Categorical类型字段数据统计实战案例
2023-03-01 20:02:26
SQL中查找某几个字段完全一样的数据
2024-01-26 12:55:59
MySQL存储文本和图片的方法
2024-01-12 17:56:03
几个小技巧帮你实现Golang永久阻塞
2024-02-14 10:37:29
javascript获取来源的URL代码
2009-02-25 12:36:00
python使用sklearn实现决策树的方法示例
2023-03-25 07:44:28
Python之多线程爬虫抓取网页图片的示例代码
2021-09-01 18:55:03
MySQL表设计优化与索引 (四)
2010-10-25 19:50:00
几个常见的MySQL的可优化点归纳总结
2024-01-13 11:32:14
详解用webpack把我们的业务模块分开打包的方法
2024-04-27 15:18:07
mysql中使用sql命令将时间戳解析成datetime类型存入
2024-01-22 00:00:25
学会sql数据库关系图(Petshop)
2024-01-28 18:43:23
JavaScript变量提升和严格模式实例分析
2024-04-17 10:35:52
使用Gitee自动化部署python脚本的详细过程
2022-03-30 07:04:55
解决python彩色螺旋线绘制引发的问题
2023-06-30 12:49:12
使用python编写android截屏脚本双击运行即可
2021-01-25 20:47:19
13个超级有用的 jQuery 内容滚动插件和教程
2011-08-10 19:10:08
Oracle如何直接运行OS命令(上)第1/2页
2010-07-30 12:54:00
anaconda3安装及jupyter环境配置全教程
2021-03-26 07:45:07