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

1. <view class="item-box" v-for="(item,index) in result" @click="more(item)" @touchstart.prevent="touchstart(item.topic, index)" 
2.       @touchend.prevent="touchend"> 
3. </view> 

点击的冲突解决需要设立一个长按的标记longTouch识别到长按的时候标记不能点击结束的时候再标记回来

 

1. // 点击设备进入更多 
2. more(item) { 
3.     if (!this.longTouch) { 
4.         uni.navigateTo({ 
5.             url: `../details/details?topic=${item.topic}&image=${item.image}`, 
6.         }) 
7.     } 
8. }, 
9. // 长按开始 
10. touchstart(topic, index) { 
11.     let that = this; 
12.     clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器 
13.     this.Loop = setTimeout(function() { 
14.         uni.showModal({ 
15.             title: '删除', 
16.             content: '请问要删除此设备吗？', 
17.             success: async (res) => { 
18.                 if (res.confirm) { 
19.                     uni.request({ 
20.                         url: '/topic/cancletopic/' + topic, 
21.                         method: 'POST', 
22.                         success(response) { 
23.                             if (response.data.success) { 
24.                                 // 从索引处删除一个元素 
25.                                 that.result.splice(index,1); 
26.                             } 
27.                         } 
28.                     }) 
29.                     console.log('用户点击确定'); 
30.                 } else if (res.cancel) { 
31.                     console.log('用户点击取消') 
32.                 } 
33.             } 
34.         }); 
35.         this.longTouch = true; 
36.     }.bind(this), 1000); 
37. }, 
38. // 长按结束 
39. touchend() { 
40.     // 延时解决抖动没有这个长按的时候也会触发点击 
41.     setTimeout(()=> { 
42.         this.longTouch = false; 
43.     }, 100) 
44.  
45.     clearInterval(this.Loop); 
46. },