虚拟节点

用于处理大量幻灯片时的性能优化。

它只渲染当前可见的幻灯片，而不是一次性渲染所有幻灯片，可以显著提高性能。

引入

WARNING

v3版本不再默认引入所有modules，这意味着在使用modules中的模块时，都需要手动引入。

同时部分modules的css也需手动引入。需要注意的是，将style设置为scoped会导致样式失效。推荐全局引入所需要的模块样式。参考：引入样式

具体可查看模块化按需引入

npm

<script lang="ts" setup>
import { Virtual } from '@zebra-ui/swiper/modules'

const modules = ref([Virtual])
</script>

uni_modules

<script lang="ts" setup>
import { Virtual } from '@/uni_modules/zebra-swiper/modules'

const modules = ref([Virtual])
</script>

npm

<style lang="scss">
    @use "@zebra-ui/swiper/modules/virtual/virtual.scss";
</style>

uni_modules

<style lang="scss">
    @use "@/uni_modules/zebra-swiper/modules/virtual/virtual.scss";
</style>

全平台兼容式写法

WARNING

使用此模块时，无论任何平台使用z-swiper组件，都需要通过v-model:list绑定数据列表，且这个列表作为最终显示的数据列表，初始化时应该为空数组。

需要注意的是，swiper会接管此数据列表，这意味着不可手动操作这个数据列表。

而用户的列表数据则通过virtualList传递给swiper。用户应维护此列表，而不是v-model:list传给swiper的列表。

此外，virtual开启后页面显示的节点数量通常不变，所以应设置循环的key值为index。

DANGER

使用virtual时，传递的数据必须是对象数组。并且组件会占用数据列表中props virtualIndex字段。

示例

1000个item节点渲染。可通过控制台观察dom变化。

WARNING

需要注意的是，swiper-item需要绑定数据列表中的样式，:custom-style="item.props.style"，这个变量是固定的，由swiper组件维护，开发者无需关注。

此外，swiper 还会维护virtual的下标，:virtualIndex="item.virtualIndex"，这个变量为固定写法，开发者无需修改。

z-swiper不支持同时使用virtual和3D切换效果，Web平台可使用z-swiper-native实现。

<z-swiper
  v-model:list="list"
  grabCursor
  virtual
  :modules="modules"
  :virtualList="virtualList"
>
  <z-swiper-item
    v-for="item in list"
    :key="index"
    :custom-style="item.props.style"
    :virtualIndex="item.virtualIndex"
  >
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

<script setup>
import { ref } from 'vue'
import { Virtual } from '@zebra-ui/swiper/modules'
const list = ref([])
const virtualList = ref(
  Array.from({
    length: 1000
  }).map((item, index) => {
    return {
      text: `Slide ${index + 1}`,
      id: index + 1
    }
  })
)
const modules = ref([Virtual])
</script>

web平台专用

TIP

如果只需兼容web平台，推荐使用z-swiper-native组件。

使用此组件不需要向swiper传递数据，直接引入并传递modules后即可循环数据。

WARNING

web平台也需要传入virtualIndex，并且swiper内部在web平台不提供index，使用for循环的index即可。

示例

1000个item节点渲染。可通过控制台观察dom变化。

<z-swiper-native grabCursor virtual :modules="modules">
  <z-swiper-item-native
    v-for="(item,index) in virtualListToWeb"
    :key="index"
    :virtualIndex="index"
  >
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item-native>
</z-swiper-native>

<script setup>
import { ref } from 'vue'
import { Virtual } from '@zebra-ui/swiper/modules'
const virtualListToWeb = ref(
  Array.from({
    length: 1000
  }).map((item, index) => {
    return {
      text: `Slide ${index + 1}`,
      id: index + 1
    }
  })
)
const modules = ref([Virtual])
</script>