小程序笔记(七)之view实现自定义长按时间

一.前言
楼主在开发小程序的过程中,遇到这样一个需求,要求长按view才开始某个操作,如果只是这样的需求简单,因为view就提供一个了长按的事件:bindlongpress
在这里插入图片描述
但是这里的时间由显示,微信默认是350ms,可是客户要求是长按4s才执行先操作,这就有点麻烦了,无法用bindlongpress去实现。

二.解决方式
1.长按操作,即是从按下到离开,会有一个时间间间隔,只要捕获这两者的时间,然后再计算两者之间的时间差即可自由实现长按多少秒再执行业务操作。
以上是解决的思路方向,现在需要捕获两个动作,以及各自的时间戳
微信提供两个事件接口来捕获按下和离开的操作,分别是bindtouchstart和bindtouchend,以及对应的操作时间时间戳,至此我们需要的参数全都齐全了,就可以编写代码了

2.核心代码
wxml

<view class="pubview" hover-class="hover" bindtouchstart="onStart" bindtouchend="onEnd" >自定义长按时间</view>

js

 /**
   * 页面的初始数据
   */
  data: {
    startTime: null,
    endTime: null,
  },

  onStart: function (event) {
    this.data.startTime = event.timeStamp
    console.log("按下时间戳:" + this.data.startTime)
  },
  onEnd: function (event) {
    this.data.endTime = event.timeStamp
    console.log("抬起时间戳:" + this.data.endTime)

    let a = this.data.endTime - this.data.startTime
    if (a >= 4000) {
      console.log("大于指定时间,开始执行对应的业务逻辑")
    }
    else {
      console.log("小于指定时间,不执行操作")
    }
  },

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序笔记demo是一款基于小程序开发的云笔记应用程序。它可以帮助用户在小程序平台上轻松地记录、管理和分享笔记。 首先,在小程序笔记demo中,用户可以创建多个笔记本,并将笔记按照不同的分类进行整理。这样,用户可以更好地组织和查找自己的笔记内容。 其次,该应用提供了丰富的编辑功能。用户可以在笔记中添加文本、图像、链接等不同的媒体元素。而且,用户可以对文本内容进行字体、大小、颜色、对齐等样式的调整,以及对图像进行裁剪、旋转和滤镜处理等操作,使笔记内容更加丰富和生动。 此外,小程序笔记demo还提供了数据同步的功能。不论用户是在手机、平板还是电脑上,只要登录同一账号,即可实现笔记数据的同步和共享。这意味着用户可以随时随地访问自己的笔记,并且与他人共享自己的笔记内容,便于协同工作和知识分享。 另外,该应用还具备创新的云储存功能。小程序笔记demo将用户的笔记数据存储在云端,有效保障了数据的安全性和可靠性。即使用户更换设备或者卸载应用,也可以轻松地恢复之前的笔记数据。 总之,小程序笔记demo是一款便捷、高效的云笔记应用程序。它通过提供多样化的编辑和同步功能,为用户提供了更好的笔记管理和分享体验。无论是个人学习、工作办公还是团队协作,都是一款非常实用的工具。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值