自动播放

自动播放指的是轮播图组件能够在不需要用户操作的情况下，自动切换到下一个幻灯片。

TIP

不要与无限循环 loop 混淆。

引入

WARNING

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

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

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

npm

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

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

uni_modules

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

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

配置

autoplay

设置为true开启自动播放。

类型

Boolean,Object

默认值

false

<z-swiper grabCursor autoplay :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

delay

自动播放的时间间隔，单位（ms）

类型

number

默认值

3000

<z-swiper grabCursor :autoplay="{ delay:500 }" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

disableOnInteraction

用户操作后是否禁用自动播放

TIP

2.x版本中，该配置的默认值为true。3.x中更改为false。

类型

boolean

默认值

false

<z-swiper
  grabCursor
  :autoplay="{ disableOnInteraction: true }"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

pauseOnMouseEnter only web

鼠标悬停时是否暂停自动播放

类型

boolean

默认值

false

<z-swiper grabCursor :autoplay="{ pauseOnMouseEnter: true }" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

reverseDirection

是否开启反向自动播放

类型

boolean

默认值

false

<z-swiper grabCursor :autoplay="{ reverseDirection: true }" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

stopOnLastSlide

是否在最后一页停止自动播放（在循环模式下无效）

类型

boolean

默认值

false

<z-swiper grabCursor :autoplay="{ stopOnLastSlide: true }" :modules="modules">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

waitForTransition

当swiper处于动画状态中时，是否等待过渡完成后再开始自动播放计时

类型

boolean

默认值

true

<z-swiper
  grabCursor
  :autoplay="{ waitForTransition: false }"
  :modules="modules"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

属性

paused & running & timeLeft

• paused：自动播放是否处于暂停状态
• running：autoplay是否处于运行状态
• timeLeft：暂停状态下切换的剩余时间

autoplay：{{swiperInstance['paused'] && swiperInstance['paused'].autoplay}}

方法

pause

暂停自动播放

<DemoOprate
  type="primary"
  @click="() => swiperInstance['pause'].autoplay.pause()"
>暂停自动播放</DemoOprate>

resume

将自动播放从暂停的状态中恢复至播放状态

<DemoOprate
  type="primary"
  @click="() => swiperInstance['resume'].autoplay.resume()"
>恢复自动播放</DemoOprate>

start

开始自动播放

<DemoOprate
  type="primary"
  @click="() => swiperInstance['start'].autoplay.start()"
>开始自动播放</DemoOprate>

stop

停止自动播放

<DemoOprate
  type="primary"
  @click="() => swiperInstance['stop'].autoplay.stop()"
>停止自动播放</DemoOprate>

事件

autoplay

自动播放发生变化时触发

<z-swiper @autoplay="onSwiperAutoplay">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

<script setup>
const onSwiperAutoplay = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

autoplayPause

暂停时触发

<z-swiper @autoplayPause="onSwiperAutoplayPause">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

<script setup>
const onSwiperAutoplayPause = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

autoplayResume

恢复时触发

<z-swiper @autoplayResume="onSwiperAutoplayResume">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

<script setup>
const onSwiperAutoplayResume = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

autoplayStart

开始时触发

<z-swiper @autoplayStart="onSwiperAutoplayStart">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

<script setup>
const onSwiperAutoplayStart = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

autoplayStop

停止时触发

<z-swiper @autoplayStop="onSwiperAutoplayStop">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

<script setup>
const onSwiperAutoplayStop = (swiper) => {
  console.log('swiper实例：', swiper)
}
</script>

autoplayTimeLeft

启用自动播放后，事件会持续触发。它包含转换到下一张幻灯片之前的剩余时间（以毫秒为单位）以及与自动播放延迟相关的时间百分比

<z-swiper @autoplayTimeLeft="onSwiperAutoplayTimeLeft">
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

<script setup>
const onSwiperAutoplayTimeLeft = (swiper, timeLeft, percentage) => {
  console.log('swiper实例：', swiper, timeLeft, percentage)
}
</script>