简言
最近在vue3使用swiper时,突然发现loop属性和slides-per-view属性同时存在启用时,loop生效,下一步只能生效一次的bug,上一步却是好的。非常滴奇怪。
解决过程
- 分析属性是否使用错误。
loop是循环模式,布尔型。
slides-per-view是同屏显示多少数量,数值型或’auto’。 - 更改的样式是否是诱因。
不是。 - 看官网,百度。
百度不到相似bug,看官网。发现loop属性描述有限制性描述。
- 最后寻找替代方案,或者降低需求。
没到这步。
问题原因
官网loop属性时描述有这样一句话。
Because of nature of how the loop mode works (it will rearrange
slides), total number of slides must be >= slidesPerView * 2
意思就是 你的数据要大于等于 一屏显示数量的两倍
解决方案
- 数据搞多点。
- slides-per-view属性值调小。