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

禁止屏幕滚动

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

你可能感兴趣的:(uni-app,前端,javascript)