微信小程序怎么实现“长按触发”？

最新推荐文章于 2024-08-15 17:34:40 发布

lezeqe

最新推荐文章于 2024-08-15 17:34:40 发布

阅读量4.2k

点赞数 3

文章标签：长按

本文链接：https://blog.csdn.net/lezeqe/article/details/116773145

版权

微信小程序专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了如何在前端开发中通过监听touchstart和touchend事件来判断用户是长按还是单击操作。通过记录触摸开始和结束的时间戳，当两者时间差超过2000毫秒时触发长按事件，否则视为单击。这种方法可以用于实现不同交互效果，如菜单显示、详情查看等。

摘要由CSDN通过智能技术生成

我的需求是对一个模块进行删除。怎么删除就不说了，我只说怎么实现长按触发一个事件。

思路：

先添加bindtouchstart（手指触摸动作开始事件），记录下触摸开始的时间戳e.timeStamp；再添加bindtouchend（手指触摸动作结束事件），同样记录触摸结束的时间戳e.timeStamp。当两个时间差大于2000毫秒（可以设置其他时间间隔），就触发长按事件，否则触发单击事件。

详情看代码：

 <view bindtap="trunToQRblogDetail" data-blogId="{{blogItem._id}}"  bindtouchstart="mytouchstart" bindtouchend="mytouchend">
            
</view>

data: {
    touchStartTime:'', //触摸开始时间戳
    touchEndTime:'',   //触摸结束时间戳
  },


 //记录点击开始的时间点
  mytouchstart(e) {
    console.log(e.timeStamp)
    this.setData({
      touchStartTime:e.timeStamp
    })
  },


 //记录点击结束的时间点。如果时间间隔大于2000毫秒，就触发新的事件
  mytouchend(e) {

    this.setData({
      touchEndTime:e.timeStamp
    })

    if(e.timeStamp-this.data.touchStartTime> 2000){
      console.log("触发长按事件")

    }
  },


//单击事件
  trunToQRblogDetail(e) {

   if(this.data.touchEndTime-this.data.touchStartTime < 2000){
   
  }

}