无限循环

前言

TIP

v3版本对loop的逻辑进行了深度重构。

在2.x版本中，loop 功能是通过克隆节点的方式实现的。这种设计虽然简单，但在性能和维护性上存在显著问题。 并且对开发者的反馈进行总结后，90%的问题都与loop配置有关。

所以在v3版本中，完全摒弃了克隆节点的模式，采用更高效的节点移动机制。

但是在小程序平台无法操作DOM，页面只能通过数据变更进行渲染。所以小程序中使用依然需要将循环的列表数据传给swiper内部进行处理，swiper处理后通过update:list回传给页面从而完成循环数据的渲染。

DANGER

使用loop无限循环必须设置v-for的key值为唯一标识。且强烈推荐数组中的item使用对象，并且对象数组更符合轮播的数据结构。如果是字符串，必须确保字符串是唯一的。不可使用循环中的index，因为无法正确匹配到需要移动的节点，从而造成图片间歇性闪烁。

设置循环的key不仅对for循环的性能有好处，并且会影响节点更新时的处理方式。

具体可以查看vue文档：key，通过 key 管理状态。

基本使用

loop

TIP

z-swiper-native 组件不需要将数据传递给swiper，swiper会直接操作dom节点。

通过将loop设置为true即可开启无限循环。

通过 v-model:list 将数据传递给swiper。（z-swiper-native不需要传递）

类型

Boolean

默认值

false

<z-swiper v-model:list="list" grabCursor loop> // z-swiper-native不需要传递v-model
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

loopPreventsSliding

当swiper正在执行动画的过程中，调用slideNext或slidePrev等跳转方法时，将不会执行跳转。

类型

Boolean

默认值

true

<z-swiper v-model:list="list" grabCursor loop :loopPreventsSliding="false">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>