uni-app 长按事件无法被页面滚动或滑动阻止问题解决

问题描述

uni-app 中 长按事件使用的是 @longpress或者 @longtap

需要触发该事件的 element 位于一个能够上下滚动的页面中

长按的元素在长按期间有页面滚动或者页面滑动时不触发长按

解决

@longpress或者 @longtap这两个事件 的触发时间是在 350ms

查阅了一些资料，发现无法更改这两个事件的 触发时间

所以我们希望在长按触发前如果有页面滑动或者滚动时阻止长按触发

有这么一个事件 @touchmove

其功能描述如下

手指触摸后移动

解决代码

<template>
	<view>
		<view>
			<view style="height: 700rpx;">
			</view>
			<view class="test"
                  @longpress="longPress"
                  @touchend="touchEnd" 
                  @touchmove="touchMove">
				长按弹出弹窗
			</view>
			<view style="height: 700rpx;">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifLongtap: true,
			}
		},
		methods: {
			longPress(itemCode) {
				if (this.ifLongtap) {
					// 长按后触发的事件
					this.showToast();
				}
			},
			touchEnd() {
				this.ifLongtap = true;
			},
			touchMove(e) {
				// 手指触摸后的移动事件
				this.ifLongtap = false;
			},
			showToast() {
				uni.showToast({
					title: '弹窗',
					icon: 'none',
				})
			}
		}
	}
</script>

<style>
	.test {
		width: 100%;
		font-size: 32rpx;
		height: 100rpx;
		background-color: #007AFF;
	}
</style>