uniapp中的触摸事件----长按删除，点击修改功能实现(记录)

需求:

任务进度列表长按弹出删除框，确认删除，点击弹出修改框，确认修改。

实现效果

知识点：

方法	说明
touchstart	手指放到屏幕上时触发
touchend	手指离开屏幕时触发
ouchmove	手指在屏幕上滑动式触发
touchcancel	系统取消touch事件的时候触发

标签部分：

	<view class="right_content" v-for="(item,index) in stepData" :key="index">
		//长按，弹删除 点击-弹框修改-提交
		<p class="result" v-if="item.scheduleContent && item.scheduleContent !== ''"
			@touchstart.prevent="gtouchstart(item)"   //长按事件
			@touchend="gtouchEnd(item)"               //点击事件
			@touchmove="gtouchmove()">                //手指有移动，取消所有事件
			<text style="color: #202020;">{{item.scheduleContent}}</text></p>
	</view>

script部分：

<script>
	export default {
		data() {
			return {
				stepData:[],
				timeOutEvent: 0
			};
		},
		methods: {
			//长按事件（起始）
			gtouchstart(item) {
				this.timeOutEvent = setTimeout(() => {
					this.longPress(item);  //长按方法
				}, 500); //这里设置定时器，定义长按500毫秒触发长按事件
				return false;
			},
			//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
			gtouchEnd(info) {
				clearTimeout(this.timeOutEvent); //清除定时器
				if (this.timeOutEvent != 0) {
					//这里写要执行的内容（如onclick事件）------------------------------
					let schedule = info.scheduleContent
					let that = this
					uni.showModal({
						title: '修改' + info.scheduleTypeName + '内容',
						content: schedule,
						editable: true,
						placeholderText: '',
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								const data = {
									id: info.id,
									scheduleContent: res.content
								}
								editMissionScheduleInfo(data).then(resolve => {
									if (resolve.code === 200) {
										//修改列表后，将修改内容回显至页面
										that.stepData.map((item, i) => {
											if (item.id == info.id) {
												item.scheduleContent = res.content
											}
										})
										uni.showToast({
											title: res.msg,
											icon: 'success',
										});
									}
								})
							}
						}
					});
				}
				return false;
			},
			//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
			gtouchmove() {
				clearTimeout(this.timeOutEvent); //清除定时器
				this.timeOutEvent = 0;
			},
			//长按后应该执行的内容
			longPress(info) {
				this.timeOutEvent = 0;
				//下面是长按步骤文字，弹出删除框---------------------
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除这条' + info.scheduleTypeName + '吗?',
					success: function(res) {
						if (res.confirm) {
							const data = {
								id: info.id
							}
							removeMissionScheduleInfo(data).then(res => {
								if (res.code === 200) {
									let newStepDate = that.stepData
									//长按列表，删除当前列页，回显数据
									that.stepData.map((item, index) => {
										if (item.id === info.id) {
											newStepDate.splice(index, 1)
										}
									})
									that.stepData = newStepDate
									uni.showToast({
										title: res.msg,
										icon: 'success',
									});
								}
							})
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
		}
	};
</script>