swiper在vue项目中loop循环轮播失效的解决方法
作者：小问_ 发布时间：2024-05-03 15:10:24
标签：swiper,vue,loop
长话短说，在vue(2.5.x)中使用swiper(4.3.3)，轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播；
那么可以这样写代码试试：
this.$api.queryImages().then((resp) => {
if(resp && resp.data.resultCode == "0"){
this.swiperImgs = resp.data.data;
this.$nextTick(() => { // 下一个UI帧再初始化swiper
this.initSwiper();
});
}
})
是的，关键就在于上面这个初始化swiper的调用了，一般会用v-for循环渲染，然后马上初始化swiper，但是这样可能导致初始化时v-for还没渲染完毕，所以可能swiper错乱， 那么swiper放在$nextTick下一个UI帧再初始化，保证了v-for已经完成循环。
initSwiper() {
if (this.swiper != null) return;
this.swiper = new Swiper('.swiper-container', {
loop: true,
speed: 900,
autoplay: {
delay: 3000, //3秒切换一次
disableOnInteraction: false
},
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
pagination: {
el: '.swiper-pagination',
// dynamicBullets: true,
}
});
}
来源：https://blog.csdn.net/dclnet/article/details/80951884
0
投稿猜你喜欢
- 在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：<div style="clear:both;">
在上一篇关于绘画Sankey桑葚图的文章里，已经介绍过大致的过程，本文主要解决如何自定义/修改 所想要的颜色， 如下所示一个桑葚图：想要修改- 目录什么是虚拟 dom？为什么需要虚拟dom？虚拟dom是如何转换为真实dom的？模板和虚拟dom的关系注入挂载完整流程总结什么是虚拟 do
- 我们可用如下代码进行监控：函数中使用了fso对象来读取文件属性。Function File_GetLastModifi
- pycharm2019激活码是专门针对与pycharm2019这一款软件而研发的激活码，能够完美激活软件，并且能够支持2019.1版本，理论
- 进程、线程和协程进程的定义：进程，是计算机中已运行程序的实体。程序本身只是指令、数据及其组织形式的描述，进程才是程序的真正运行实例。线程的定
- 一、前言本文讲述的是1元1次方程，1元2次方程的python解法。只用给出一般形式的系数和常数，自动给出方程的解。还附带函数解析。二、1元1
- 我们在做网站的时候，网站后台系统一般都会用到web编辑器，今天笔者就给大家推荐一款百度UEditor编辑器。关于这款百度UEditor编辑器
- 一、概述机器学习算法在近几年大数据点燃的热火熏陶下已经变得被人所“熟知”，就算不懂得其中各算法理论，叫你喊上一两个著名算法的名字，你也能昂首
- 关于书写习惯，遵循曾经总结过的风格标准，现在一点都没有变。并且近来翻看高手作品，横向连排似乎在大产品项目中逐渐成为主流，个人认为如此维护效率
- QQ邮箱最新推出了一个授权码，需已验证的手机号向QQ邮箱服务器发送一条短信获得。该授权码用于第三方客户端登录，代替了第三方登录时使用的个人邮
- 在 Python/Django 的世界里有这样一个谚语：为语言而来，为社区而留。对绝大多数人来说的确是这样的，但是，还有一件事情使得我们一直
- 这里要注意的是js的时间戳是13位，php的时间戳是10位,转换函数如下： var nowtime = (new Date).getTime
- 关于代码调试的技巧，我之前写过很多的文章，关注比较早的同学，也应该都有看过。还没看过的同学，欢迎前往查阅：更多Python代码调试技巧其中有
- 导语害！现在是10月份了，国庆过完也降温了——还有几个月就过年了，哦吼~这一年就快过去了，不知道小编带给大家这么多的表白代码都用了没？用了没
- XML.DOM需求有一个表，里面数据量比较大，每天一更新，其字段可以通过xml配置文件进行配置，即，可能每次建表的字段不一样。上游跑时会根据
- 在pyplot模块中可以使用xlabel()和ylabel()函数设置x轴y轴的标签。这两个函数的使用方法非常相似。使用xlabel()设置
- 概述concurrent.futures 是 3.2 中引入的新模块，它为异步执行可调用对象提供了高层接口。可以使用 ThreadPoolE
- Sublime Text 3纯文本编辑器Package Control（Sublime的包管理器）Sublime Text3中的插件，通过该
- 在PyTorch中，torch.Tensor类是存储和变换数据的重要工具，相比于Numpy，Tensor提供GPU计算和自动求梯度等更多功能
