uniapp长按删除解决了同一个元素长按和点击的冲突

长按删除并解决点击的冲突

<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);
},