Swiper 轮播图分页器 swiper-pagination无法显示&轮播失效 问题
背景项目是用的是Knockout框架,引用了swiper轮播器,结果出现了swiper-pagination无法显示&轮播失效问题,在网上搜索出的答案基本都是基于Vue框架出现的同种问题,不过万变不离其宗,还是很有参考价值的。一个总结很全面的博文,终于在最后找到了问题所在!原因项目中获取数据采用了异步方式,先请求数据,后异步对数据进行处理,再将处理后的数据渲染在页面。但是生成swiper时
·
背景
项目是用的是Knockout框架,引用了swiper轮播器,结果出现了swiper-pagination无法显示&轮播失效问题,在网上搜索出的答案基本都是基于Vue框架出现的同种问题,不过万变不离其宗,还是很有参考价值的。
一个总结很全面的博文,终于在最后找到了问题所在!
原因
项目中获取数据采用了异步方式,先请求数据,后异步对数据进行处理,再将处理后的数据渲染在页面。
但是生成swiper时机放在了主流程下,未放在异步处理流程中,发生在数据更新之前,导致分页器下子节点元素没有生成渲染,轮播效果也不正常显示。
解决
将生成swiper的函数放在异步处理流程中。
更多推荐
已为社区贡献1条内容
所有评论(0)