方法

挂载在swiper实例中的方法。

slideTo

将swiper切换到指定下标

参数名称	类型	必填	描述
index	number	是	目标item的下标
speed	number	否	切换速度(单位ms)
runCallbacks	boolean	否	是否触发transition回调

<DemoOprate
  type="primary"
  @click="() => swiperInstance['slideTo'].slideTo(3)"
>切换至下标3的item</DemoOprate>

slideToLoop

在loop无限循环的情况下将swiper切换到指定下标

参数名称	类型	必填	描述
index	number	是	目标item的下标
speed	number	否	切换速度(单位ms)
runCallbacks	boolean	否	是否触发transition回调

<DemoOprate
  type="primary"
  @click="() => swiperInstance['slideToLoop'].slideToLoop(3)"
>切换至下标3的item</DemoOprate>

slideNext

将swiper切换至下一个item

参数名称	类型	必填	描述
speed	number	否	切换速度(单位ms)
runCallbacks	boolean	否	是否触发transition回调

<DemoOprate
  type="primary"
  @click="() => swiperInstance['slideNext'].slideNext()"
>切换至下一个item</DemoOprate>

slidePrev

将swiper切换至上一个item

参数名称	类型	必填	描述
speed	number	否	切换速度(单位ms)
runCallbacks	boolean	否	是否触发transition回调

<DemoOprate
  type="primary"
  @click="() => swiperInstance['slidePrev'].slidePrev()"
>切换至上一个item</DemoOprate>

enable & disable

启用和禁用swiper

<DemoOprate
  type="primary"
  @click="() => swiperInstance['enableAndDisable'].disable()"
>禁用swiper</DemoOprate>
<DemoOprate
  type="primary"
  @click="() => swiperInstance['enableAndDisable'].enable()"
>启用swiper</DemoOprate>

destroy

销毁swiper

参数名称	类型	必填	描述
deleteInstance	boolean	否	是否销毁swiper实例
cleanupStyles	boolean	否	是否清除swiper样式

<DemoOprate
  type="primary"
  @click="() => swiperInstance['destroy'].destroy()"
>销毁swiper</DemoOprate>

changeDirection

动态切换swiper的滑动方向

参数名称	类型	必填	描述
direction	string	否	切换的方向 horizontal vertical

<DemoOprate
  type="primary"
  @click="() => swiperInstance['changeDirection'].changeDirection()"
>切换swiper方向</DemoOprate>

getTranslate

获取swiper当前实时的translate

<DemoOprate
  type="primary"
  @click="() => swiperInstance['getTranslate'].getTranslate()"
>获取当前的translate</DemoOprate>

setTranslate

设置swiper的translate

参数名称	类型	必填	描述
translate	number	是	单位px

<DemoOprate
  type="primary"
  @click="() => swiperInstance['setTranslate'].setTranslate(-100)"
>设置swiper的translate</DemoOprate>

translateTo

设置transform中的translate位移

参数名称	类型	必填	描述
translate	number	是	位移的值，单位px
speed	number	是	动画持续时间，单位ms
runCallbacks	boolean	否	是否触发transition回调
translateBounds	boolean	否	是否在swiper的位移区间中移动

<DemoOprate
  type="primary"
  @click="() => swiperInstance['translateTo'].translateTo(-200, 1000)"
>translateTo</DemoOprate>

setProgress

通过进度百分比设置swiper的位移

参数名称	类型	必填	描述
progress	number	是	进度，范围0-1
speed	number	是	动画持续时间，单位ms

<DemoOprate
  type="primary"
  @click="() => swiperInstance['setProgress'].setProgress(0.5, 1000)"
>setProgress</DemoOprate>

attachEvents && detachEvents

重新绑定事件和移除绑定事件

<DemoOprate
  type="primary"
  @click="() => swiperInstance['attachEvents'].detachEvents()"
>移除绑定事件</DemoOprate>
<DemoOprate
  type="primary"
  @click="() => swiperInstance['attachEvents'].attachEvents()"
>重新绑定事件</DemoOprate>

on & off

设置swiper监听，移除swiper监听

<DemoOprate
  type="primary"
  @click="
    () =>
      swiperInstance['on'].on('click', () => {
        console.log('swiper点击了')
      })
  "
>监听swiper点击</DemoOprate>

once

添加swiper监听，该监听中的回调只执行一次

<DemoOprate
  type="primary"
  @click="
    () =>
      swiperInstance['once'].once('click', () => {
        console.log('swiper点击了')
      })
  "
>监听swiper点击</DemoOprate>

emit

触发swiper监听

<DemoOprate
  type="primary"
  @click="() => swiperInstance['emit'].emit('click')"
>触发swiper监听</DemoOprate>

maxTranslate & minTranslate

获取当前最大和最小位移值

<DemoOprate
  type="primary"
  @click="() => swiperInstance['maxTranslate'].maxTranslate()"
>获取最大位移值</DemoOprate>

setGrabCursor & unsetGrabCursor

开启鼠标抓手，关闭鼠标抓手

<DemoOprate
  type="primary"
  @click="() => swiperInstance['setGrabCursor'].setGrabCursor()"
>开启鼠标抓手</DemoOprate>
<DemoOprate
  @click="() => swiperInstance['setGrabCursor'].unsetGrabCursor()"
>关闭鼠标抓手</DemoOprate>

slideToClosest

设置swiper到最近的边界

参数名称	类型	必填	描述
speed	number	否	切换速度(单位ms)
runCallbacks	boolean	否	是否触发transition回调

<DemoOprate
  type="primary"
  @click="() => swiperInstance['slideToClosest'].slideToClosest(3000)"
>slideToClosest</DemoOprate>

updateAutoHeight

当开启高度自适应时，设置高度自适应动画的持续时间

参数名称	类型	必填	描述
speed	number	否	动画持续时间，单位ms

<DemoOprate
  type="primary"
  @click="() => swiperInstance['updateAutoHeight'].updateAutoHeight(3000)"
>updateAutoHeight</DemoOprate>

updateSize

更新swiper的尺寸

swiper的高度：

<DemoOprate
  type="primary"
  @click="() => swiperInstance['updateSize'].updateSize()"
>更新swiper高度</DemoOprate>

updateSlides

更新item的数量和偏移。

<DemoOprate
  type="primary"
  @click="() => swiperInstance['updateSlides'].updateSlides()"
>updateSlides</DemoOprate>

updateProgress

更新swiper的progress。

<DemoOprate
  type="primary"
  @click="() => swiperInstance['updateProgress'].updateProgress()"
>updateProgress</DemoOprate>

updateSlidesClasses

更新item的类名。

<DemoOprate
  type="primary"
  @click="() => swiperInstance['updateSlidesClasses'].updateSlidesClasses()"
>updateSlidesClasses</DemoOprate>

update

更新swiper

<DemoOprate
  type="primary"
  @click="() => swiperInstance['update'].update()"
>update</DemoOprate>