Swiper 轮播图分页器 swiper-pagination无法显示轮播失效 问题

news/2024/7/11 1:58:54 标签: javascript, html, jquery

背景

项目是用的是Knockout框架,引用了swiper轮播器,结果出现了swiper-pagination无法显示&轮播失效问题,在网上搜索出的答案基本都是基于Vue框架出现的同种问题,不过万变不离其宗,还是很有参考价值的。

一个总结很全面的博文,终于在最后找到了问题所在!

原因

项目中获取数据采用了异步方式,先请求数据,后异步对数据进行处理,再将处理后的数据渲染在页面。
但是生成swiper时机放在了主流程下,未放在异步处理流程中,发生在数据更新之前,导致分页器下子节点元素没有生成渲染,轮播效果也不正常显示。

解决

将生成swiper的函数放在异步处理流程中。


http://www.niftyadmin.cn/n/1179577.html

相关文章

UIView动画 2

UIView动画能够完美的建立起一座简介视图当前状态和未来状态的视觉桥梁,可以把所有视觉变化链接起来,产生流畅的动画效果。可以产生动画效果的变化包括:位置变化,大小变化,伸缩变化,透明度变化,…

Eclipse中导入第三方源码的问题和备用解决方案

在前篇《配置BeanUtils包,同时也是对导入第三包的步骤说明》中,我已经将【commons-beanutils-1.9.2.jar】包导入,但是在使用BeanUtils进行日期转换的过程中 要使用到ConvertUtils类中的register方法,其中一个参数是使用该包中的Co…

js报错- cannot set property xxx of undefined

case1 报错代码 quizList[index] currentQuiz; quizList[index].learningItem item;报错内容 Cannot read properties of undefined (reading learningItem)报错原因 currentQuiz对象有可能是undefined,如果再给undefined对象quizList[index]动态添加属性lear…

支点:技术选择的精髓

给我一个支点,我就能撬起地球。这是阿基米德的话。当你在悬崖之下,你的心爱的在悬崖之上,你要爬上悬崖,应该怎么做呢?寻找支点,一步步的攀爬。已是悬崖百丈冰,找不到支点怎么办?那就…

js 异步转同步

原因 JS很多函数都是异步执行,而有些时候需要等到函数结束后拿到相应的结果进行处理,因此会涉及到确定异步是否结束,异步转同步的问题。 方法一:Promise Promise方法,等待回调函数结束后进行,使用方法参…

单例模式:Instance

前言:  学习面向对象程序设计的朋友应该知道,我们大多数情况下通过 new 操作来实例化对象的。对于一些仅需要一次初始化的对象来说,频繁的new操作无疑会过多浪费内存空间。基于此,单例模式便应运而生了。所谓单例,即…

swiper组件的onSlideChangeStart失效

原因 版本改版,onSlideChangeStart方法不能用,支持3.0版本 参考https://3.swiper.com.cn/api/callbacks/2014/1217/92.html 修改 改用on{slideChange},参考:https://www.swiper.com.cn/api/parameters/351.html

[开源]KJFramework.Message 智能二进制消息框架

框架的介绍: 1. 已经完成了对于消息内部类型的支持(int, short, long, uint, ushort, ulong, bool ,float, double, byte, sbyte, byte[], decimal, DateTime, IntPtr, Guid)2. 支持内部序列化元数据(.NET可序列化的对象) 3. 对于智能对象内部的“智能对象”提供支持。 支持迭…