長按刪除並解決點選的衝突

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

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。