zebra-swiper

# 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();
	}
}

← 模块 →