长按删除并解决点击的冲突
<view class="item-box" v-for="(item,index) in result" @click="more(item)" @touchstart.prevent="touchstart(item.topic, index)"
@touchend.prevent="touchend">
</view>
点击的冲突解决需要设立一个长按的标记longTouch识别到长按的时候标记不能点击结束的时候再标记回来
// 点击设备进入更多
more(item) {
if (!this.longTouch) {
uni.navigateTo({
url: `../details/details?topic=${item.topic}&image=${item.image}`,
})
}
},
// 长按开始
touchstart(topic, index) {
let that = this;
clearInterval(this.Loop); //再次清空定时器,防止重复注册定时器
this.Loop = setTimeout(function() {
uni.showModal({
title: '删除',
content: '请问要删除此设备吗?',
success: async (res) => {
if (res.confirm) {
uni.request({
url: '/topic/cancletopic/' + topic,
method: 'POST',
success(response) {
if (response.data.success) {
// 从索引处删除一个元素
that.result.splice(index,1);
}
}
})
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消')
}
}
});
this.longTouch = true;
}.bind(this), 1000);
},
// 长按结束
touchend() {
// 延时解决抖动没有这个长按的时候也会触发点击
setTimeout(()=> {
this.longTouch = false;
}, 100)
clearInterval(this.Loop);
},