小程序笔记(七)之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("小于指定时间,不执行操作")
    }
  },

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值