事件

TIP

v3版本所有平台都可通过v-on绑定事件并获取swiper实例。

swiper

swiper组件挂载完成时触发。

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

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

slideChange

swiper中的activeIndex变化时触发。

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

<script setup>
const onSlideChange = (swiper) => {
  console.log('swiper当前下标：', swiper.activeIndex)
}
</script>

realIndexChange

swiper中的realIndex变化时触发。

TIP

loop模式监听下标变化应绑定此事件。

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

<script setup>
const onRealIndexChange = (swiper) => {
  console.log('swiper当前下标：', swiper.realIndex)
}
</script>

click

当用户点击/触摸 Swiper 时触发。

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

<script setup>
const onClick = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('点击事件：', event)
}
</script>

beforeInit

swiper初始化前触发。

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

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

init

swiper初始化时触发。

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

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

afterInit

swiper初始化后触发。

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

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

touchStart

当用户触摸 Swiper 时触发。

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

<script setup>
const onTouchStart = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('事件对象：', event)
}
</script>

touchMove

当用户触摸并移动手指时触发。

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

<script setup>
const onTouchMove = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('事件对象：', event)
}
</script>

touchEnd

当用户释放 Swiper 时触发。

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

<script setup>
const onTouchEnd = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('事件对象：', event)
}
</script>

touchMoveOpposite

当用户触摸并移动手指时，且移动方向与设定方向相反时触发。

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

<script setup>
const onTouchMoveOpposite = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('事件对象：', event)
}
</script>

snapIndexChange

snapIndex变化时触发。

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

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

slideChangeTransitionStart

在切换到其他幻灯片（下一个或上一个）的动画开始时触发。

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

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

slideChangeTransitionEnd

在切换其他幻灯片（下一个或上一个）的动画结束后触发。

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

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

slideNextTransitionStart

与 "slideChangeTransitionStart" 相同，但仅在 "向前" 方向触发。

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

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

slideNextTransitionEnd

与 "slideChangeTransitionEnd" 相同，但仅在 "向前" 方向触发。

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

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

activeIndexChange

当活动索引发生变化时触发。

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

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

beforeDestroy

在 Swiper 销毁之前触发。

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

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

beforeLoopFix

在 "loop fix" 之前触发。

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

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

beforeResize

在 resize 处理之前触发。

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

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

beforeSlideChangeStart

在幻灯片切换过渡开始之前触发。

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

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

beforeTransitionStart

在过渡开始之前触发。

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

<script setup>
const onBeforeTransitionStart = (swiper, speed, internal) => {
  console.log('swiper实例：', swiper)
  console.log('过渡速度：', speed)
  console.log('是否内部触发：', internal)
}
</script>

breakpoint

在断点切换时触发。

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

<script setup>
const onBreakpoint = (swiper, breakpointParams) => {
  console.log('swiper实例：', swiper)
  console.log('断点参数：', breakpointParams)
}
</script>

changeDirection

在方向改变时触发。

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

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

destroy

在 Swiper 销毁时触发。

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

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

doubleClick

当用户双击/双触 Swiper 时触发。

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

<script setup>
const onDoubleClick = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('双击事件：', event)
}
</script>

doubleTap

当用户双击 Swiper 容器时触发。

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

<script setup>
const onDoubleTap = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('双触事件：', event)
}
</script>

fromEdge

当 Swiper 从开始或结束位置移开时触发。

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

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

lock

当 Swiper 被锁定时触发（当 watchOverflow 启用时）。

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

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

loopFix

在 "loop fix" 之后触发。

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

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

momentumBounce

在动量反弹时触发。

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

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

observerUpdate

当启用 observer 并检测到 DOM 变化时触发。

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

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

orientationchange

当方向改变时触发（例如从横屏切换到竖屏）。

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

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

progress

当 Swiper 进度改变时触发，参数 progress 始终在 0 到 1 之间。

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

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

reachBeginning

当 Swiper 到达其起始位置时触发。

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

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

reachEnd

当 Swiper 到达最后一张幻灯片时触发。

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

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

resize

在窗口大小调整之前触发。

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

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

setTransition

每次 Swiper 开始动画时触发。

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

<script setup>
const onSetTransition = (swiper, transition) => {
  console.log('swiper实例：', swiper)
  console.log('过渡时间(ms)：', transition)
}
</script>

setTranslate

当 Swiper 的包装器改变其位置时触发。

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

<script setup>
const onSetTranslate = (swiper, translate) => {
  console.log('swiper实例：', swiper)
  console.log('当前位移值：', translate)
}
</script>

slidePrevTransitionEnd

与 "slideChangeTransitionEnd" 相同，但仅在 "向后" 方向触发。

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

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

slidePrevTransitionStart

与 "slideChangeTransitionStart" 相同，但仅在 "向后" 方向触发。

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

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

slideResetTransitionEnd

在重置幻灯片到当前位置的动画结束时触发。

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

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

slideResetTransitionStart

在重置幻灯片到当前位置的动画开始时触发。

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

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

sliderFirstMove

在第一次触摸/拖动移动时触发。

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

<script setup>
const onSliderFirstMove = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('事件对象：', event)
}
</script>

sliderMove

当用户触摸并移动手指时触发。

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

<script setup>
const onSliderMove = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('事件对象：', event)
}
</script>

slidesGridLengthChange

当幻灯片网格长度发生变化时触发。

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

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

slidesLengthChange

当幻灯片数量发生变化时触发。

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

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

slidesUpdated

当幻灯片及其大小计算和更新后触发。

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

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

snapGridLengthChange

当捕捉网格长度发生变化时触发。

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

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

tap

当用户点击/触摸 Swiper 时触发。

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

<script setup>
const onTap = (swiper, event) => {
  console.log('swiper实例：', swiper)
  console.log('事件对象：', event)
}
</script>

toEdge

当 Swiper 到达开始或结束位置时触发。

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

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

transitionEnd

在过渡结束后触发。

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

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

transitionStart

在过渡开始时触发。

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

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

unlock

当 Swiper 解锁时触发（当 watchOverflow 启用时）。

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

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

update

在 swiper.update() 调用后触发。

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

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