uniapp如何动态绑定事件

最新推荐文章于 2025-06-12 14:50:37 发布

原创最新推荐文章于 2025-06-12 14:50:37 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #动态绑定事件

本文介绍如何在uni-app中实现列表项的长按删除功能，并通过判断变量isforbid来控制是否允许进行删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

展示列表与内容详情使用的是同一个组件，想要实现列表里长按删除，而内容详情里不可以长按删除。由于统一绑定了@longpress事件，所以想实现：isforbid为true的时候解绑@longpress事件,isforbid为false时绑定@longpress事件这种效果。

经过一波分析和搜索，没有找到合适的解决方案，uniapp官方好像就没有提供这种动态绑定与解绑的解决方案，最后采用了“曲线救国”的方式，实现了这种效果。

解决

思路

统一绑定@longpress事件
isforbid为true时，方法直接返回，不进行后续操作；否则进行删除操作

<view  v-for="(data, i) in checkList" :key="i" >
   <view @click="goCheck(data.check.id)" @longpress="toDel(data.user.id, data.check.id)" :class="forbid ? 'content-list-check' : 'content-list'">
       <image :class="!isComment ? 'photo' : 'comment-photo'"
       :src="data.user.avatar == '' ? '../../../static/img/avatar.png' : data.user.avatar"
       alt="头像"></image>
  </view>
</view>

toDel(userId, id) {
	// 如果不是本人的打卡或者在详情页面，不弹出删除提示框
	if(this.isforbid) {
		return;
	}
	uni.showModal({
		title: '删除',
		content: 请问要删除本条打卡吗？,
		success: function(res) {
			if (res.confirm) {
				consoloe.log('删除打卡')
			}
		}
	});
}