控制器

用于同步多个 Swiper 实例。通过这个功能，可以让一个 Swiper 控制另一个 Swiper 的行为，实现联动效果。

例如，当滑动一个 Swiper 时，另一个 Swiper 会同步滑动。

引入

WARNING

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

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

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

npm

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

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

uni_modules

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

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

配置

control

被控制的swiper实例。

类型

SwiperInstance

默认值

-

<z-swiper
  grabCursor
  :modules="modules"
  :controller="{ control: swiperInstance['control'] }"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>
<z-swiper grabCursor :modules="modules" @swiper="onSwiper($event, 'control')">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

inverse

是否开启反向控制。

类型

boolean

默认值

false

<z-swiper
  grabCursor
  :modules="modules"
  :controller="{ control: swiperInstance['inverse'],inverse:true }"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>
<z-swiper grabCursor :modules="modules" @swiper="onSwiper($event, 'inverse')">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

示例

三个swiper相互控制对方。

<z-swiper
  grabCursor
  :modules="modules"
  :controller="{ control: [swiperInstance['example2'],swiperInstance['example3']] }"
  @swiper="onSwiper($event, 'example1')"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>
<z-swiper
  grabCursor
  :modules="modules"
  :controller="{ control: swiperInstance['example1'] }"
  @swiper="onSwiper($event, 'example2')"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>
<z-swiper
  grabCursor
  :modules="modules"
  :controller="{ control: swiperInstance['example1'] }"
  @swiper="onSwiper($event, 'example3')"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>