uniapp---app滑動翻頁(上滑、下滑、左滑、右滑)

maidu_xbd發表於2020-11-29

(1)為頁面繫結【touchstart】【touchend】事件

<template>
	<view class="home" @touchstart="start" @touchend="end">
    //.......
	</view>

</template>

(2)js部分

<script>
	export default {
		data() {
			return {
				startData: {
					clientX: 0,
					clientY: 0
				}
			}
		},
        methods:{
            start(e) {
				console.log("開始下滑座標", e.changedTouches[0].clientY)
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				console.log("結束下滑座標", e.changedTouches[0].clientY)
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				if (subY < -50) {
					console.log('下滑')
					// 翻頁
					uni.navigateTo({
						url: "/pages/camera/camera"
					})
				} else if (subY > 50) {
					console.log('上滑')
				} else if (subX > 50) {
					console.log('左滑')
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else if (subX < -50) {
					console.log('右滑')
				} else {
					console.log('無效')
				}
			}
        }
</script>
			

 

相關文章