# Methods(Swiper方法)
swiper方法的推荐使用ref调用,如跳转到某个slide:
<z-swiper ref="zSwiper" v-model="list">
<z-swiper-item v-for="(item,index) in list" :key="index">
<image class="image" :src="item" mode="aspectFill">
</image>
</z-swiper-item>
</z-swiper>
<button type="primary" @click="slideTo()">跳转</button>
data() {
return {
list: [
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg',
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe4.jpg',
'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe5.jpg',
]
}
},
methods: {
slideTo() {
this.$refs.zSwiper.swiper.slideTo(2, 1000, false);//切换到第三个slide,速度为1秒
}
}
# mySwiper.slideNext(speed, runCallbacks)
滑动到下一个滑块。
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
speed | num | 可选 | 切换速度(单位ms) |
runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数 |
methods: {
slideNext() {
this.$refs.zSwiper.swiper.slideNext();
}
}
# mySwiper.slidePrev(speed,runCallbacks)
滑动到前一个滑块。
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
speed | num | 可选 | 切换速度(单位ms) |
runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数 |
methods: {
slidePrev() {
this.$refs.zSwiper.swiper.slidePrev();
}
}
# mySwiper.slideTo(index, speed, runCallbacks)
控制Swiper切换到指定slide。
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
index | num | 必选 | 指定将要切换到的slide的索引 |
speed | num | 可选 | 切换速度(单位ms) |
runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数 |
methods: {
slidePrev() {
this.$refs.zSwiper.swiper.slideTo(0, 1000, false);//切换到第一个slide,速度为1秒
}
}
# mySwiper.slideToLoop(index, speed, runCallbacks)
在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex
比如你的swiper是loop模式且只复制一个slide(默认情况),你想跳转到第三个slide时(activeIndex:3/realIndex:2),应该使用slideTo(3)
或者slideToLoop(2)
。
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
index | num | 必选 | 指定将要切换到的slide的索引 |
speed | num | 可选 | 切换速度(单位ms) |
runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数 |
methods: {
slidePrev() {
this.$refs.zSwiper.swiper.slideToLoop(0, 1000, false);//切换到第一个slide,速度为1秒
}
}
# mySwiper.destroy(deleteInstance, cleanupStyles)
销毁Swiper。销毁所有绑定的监听事件。
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
deleteInstance | boolean | 可选 | 设为false则不销毁Swiper对象,默认为true |
cleanupStyles | boolean | 可选 | 设为true则清除所有swiper设定选项和样式,比如direction等,默认为false |
methods: {
destroy() {
this.$refs.zSwiper.swiper.destroy();
}
}
# mySwiper.getTranslate()
返回实时的wrapper位移(translate)。
这与通过属性mySwiper.translate 获取到的数值稍有不同,即使是在过渡时(animating)也能获取到,而后者精度较高。
methods: {
getTranslate() {
this.$refs.zSwiper.swiper.getTranslate();
}
}
# mySwiper.setTranslate(translate)
手动设置wrapper的位移。在其他非位移的切换时则表现为相应的效果,例如3D切换时改变的是角度。 translate:必选,位移值(单位px)。
例:swiper宽度为500,设置translate为-250。在默认的effect: slide时,swiper会向左滑动250px,如果设置了切换效果effect: cube,swiper会旋转45度。
methods: {
setTranslate() {
this.$refs.zSwiper.swiper.setTranslate(-300);
}
}
# mySwiper.updateSize()
这个方法会重新计算Swiper的尺寸。
methods: {
updateSize() {
this.$refs.zSwiper.swiper.updateSize();
}
}
# mySwiper.updateSlides()
这个方法会重新计算Slides的数量。
methods: {
updateSlides() {
this.$refs.zSwiper.swiper.updateSlides();
}
}
# mySwiper.updateProgress()
这个方法会重新计算Swiper的progress值。
methods: {
updateProgress() {
this.$refs.zSwiper.swiper.updateProgress();
}
}
# mySwiper.updateSlidesClasses()
更新slides和bullets的active/prev/next 类名。
methods: {
updateSlidesClasses() {
this.$refs.zSwiper.swiper.updateSlidesClasses();
}
}
# mySwiper.update(updateTranslate)
更新Swiper,就像重新初始化一样。这个方法包含了updateContainerSize,updateSlidesSize,updateProgress,updateClasses方法。
可选参数:updateTranslate,默认false,设置为true则重新计算Wrapper的位移。
methods: {
update() {
this.$refs.zSwiper.swiper.update();
}
}
# mySwiper.detachEvents()
移除所有监听事件。
methods: {
detachEvents() {
this.$refs.zSwiper.swiper.detachEvents();
}
}
# mySwiper.attachEvents()
重新绑定所有监听事件。
methods: {
attachEvents() {
this.$refs.zSwiper.swiper.attachEvents();
}
}
# mySwiper.on(event,handler)
添加回调函数或者事件句柄。(监听事件非常有用)
methods: {
on() {
this.$refs.zSwiper.swiper.on("slideChange",(swiper)=>{
console.log(swiper)
});
}
}
# mySwiper.once(event,handler)
添加回调函数或者事件句柄,这些事件只会执行一次。
methods: {
once() {
this.$refs.zSwiper.swiper.once("slideChange",(swiper)=>{
console.log(swiper)
});
}
}
# mySwiper.off(event)
移除事件的所有句柄
methods: {
off() {
this.$refs.zSwiper.swiper.off("slideChange");
}
}
# mySwiper.off(event, handler)
移除某个回调/事件。
methods: {
off() {
this.$refs.zSwiper.swiper.off("slideChange");
}
}
# mySwiper.changeDirection(direction)
动态改变切换方向。
可选择方向direction: horizontal或vertical,留空则自动改变。
methods: {
changeDirection() {
this.$refs.zSwiper.swiper.changeDirection();
}
}
# mySwiper.translateTo(translate, speed, runCallbacks, translateBounds)
对Swiper 的Wrapper 进行自定义的CSS3位移动画。
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
translate | num | 必选 | 位移值(单位像素) |
speed | num | 必选 | 动画持续时间(单位毫秒) |
runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数(默认true) |
translateBounds | boolean | 可选 | 设置为false时只能在Swiper的最大和最小位移值内移动(默认true) |
methods: {
translateTo() {
this.$refs.zSwiper.swiper.translateTo(-2000, 1000, true, false);
}
}
# mySwiper.setProgress(progress, speed)
设置swiper的progress。
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
progress | num | 必选 | 设置的progress值,范围0~1。0是初始位置,1是最后一个slide。 |
speed | num | 可选 | 变换的速度。单位ms。 |
methods: {
setProgress() {
this.$refs.zSwiper.swiper.setProgress(0.3, 1500);
}
}
# mySwiper.enable()
动态启用Swiper(如果已经禁用)。
methods: {
enable() {
this.$refs.zSwiper.swiper.enable();
}
}
# mySwiper.disable()
禁用 Swiper(如果已启用)。当 Swiper 被禁用时,它将隐藏所有导航元素并且不会响应任何事件和交互。
methods: {
disable() {
this.$refs.zSwiper.swiper.disable();
}
}
← Events(事件) 模块 →