【uniapp】监听触摸事件、禁止屏幕滚动

最新推荐文章于 2024-01-02 16:01:39 发布

Minions_Fatman

最新推荐文章于 2024-01-02 16:01:39 发布

阅读量3.3k

点赞数

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/Minions_Fatman/article/details/131933029

版权

禁止屏幕滚动

//最外层view
<view @touchmove.stop.prevent="() => {}"></view>

监听触摸事件滑动事件
手指滑动事件三个事件：
@touchstart ：触摸开始；
@touchmove：手指滑动的过程；
@touchend：触摸结束，手指离开屏幕。
例如：
@touchstart=“start”
@touchend=“end”
@touchmove=“move”

左边滑动时，右边不动

<template>
<view>
	<view @touchstart="stop" @touchend="stop" @touchmove="stop" 
	@touchmove.stop.prevent="() => {}">
		<scroll-view class="left-warp" :scroll-y="true">
			<view class="tab" :class="{active:i==tabIndex}" v-for="(tab,i) in tabs" :key="i" @click="tabChange(i)">{{tab}}</view>
		</scroll-view>
	</view>
	<view @touchstart="end" @touchend="end" @touchmove="end">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<good-list :list="goods"></good-list>
		</mescroll-body>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onHide() {
			var box = function(e) { passive: false };
			document.body.style.overflow = '';
			document.removeEventListener("touchmove", box, false);
		},
		methods: {
			end() {
				var box = function(e) { passive: false };
				document.body.style.overflow = '';
				document.removeEventListener("touchmove", box, false);
			},
			stop() {
				var box = function(e) { passive: false };
				document.body.style.overflow = 'hidden';
				document.addEventListener("touchmove", box, false);
			},
		}
	}
</script>