Swiper 实例属性

activeIndex 只读

swiper中当前活动的下标。

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

realIndex 只读

swiper当前活动item的真实下标。在loop与virtual中使用。

allowSlideNext

是否允许切换swiper到下一个item

allowSlidePrev

是否允许切换swiper到上一个item

allowTouchMove

是否允许通过触摸切换swiper

animating 只读

动画状态

clickedIndex 只读

swiper最后一次点击的下标

isBeginning 只读

swiper是否位于最开始的位置

isEnd 只读

swiper是否位于末尾

progress 只读

swiper的进度 0-1

translate 只读

当前的translate值

width 只读

swiper的宽度

height 只读

swiper的高度

在页面中获取swiper实例

通过swiper挂载完成后的回调 推荐

文档中所有获取实例都使用此方法。

<z-swiper grabCursor @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>
  import {
   ref
  } from 'vue';

  const onSwiper = (swiper)=>{
    console.log("swiper实例:",swiper)
  }
</script>

通过ref

通过访问z-swiper组件中的swiper属性。

WARNING

swiper挂载完成后才可访问swiper实例。

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

<script setup>
  import {
   ref
  } from 'vue';
  const swiperByRef= ref(null) 
</script>