禁止屏幕滚动

//最外层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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐