方式一
wxml 片段
<view class="{{longPressTag==index?'long-press-status':''}}
wx:for="{{searchHistory}}" wx:key="index" data-index="{{index}}"
catchtap="onTouch"
bindlongpress="longPress">
{{item}}
</view>
js 片段
Page({
onTouch: function(e) {
//标签单击事件逻辑
},
longPress: function(e) {
//标签长按事件逻辑
}
})
解析
-
tap触摸事件采用catch阻止事件冒泡 - 1.5.0之后支持
longpress事件，手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
方式二（不推荐）
-
longtap事件，但在触发时会同时触发单击事件，需配合touchstart和touchend事件计算触屏开始和结束时间来使用
wxml
<view class="{{longPressTag==index?'long-press-status':''}}
wx:for="{{searchHistory}}" wx:key="index" data-index="{{index}}"
catchtap="onTouch"
bindlongtap="longPress"
bindtouchstart="touchStart"
bindtouchend="touchEnd">
{{item}}
</view>
js
Page({
touchStart: function (e) { //记录触屏开始时间
this.setData({start:e.timeStamp })
},
touchEnd: function (e) { //记录触屏结束时间
this.setData({end: e.timeStamp })
},
longPress: function(e) { //长按事件逻辑
},
onTouch:function(e) {
if (this.data.end - this.data.start < 350){
//单击事件逻辑
}
}
})
文章来源地址https://www.toymoban.com/news/detail-517514.html
文章来源：https://www.toymoban.com/news/detail-517514.html
到了这里，关于微信小程序长按与单击事件触发的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
