事情的起源
在做项目的过程中,遇到这么一个需求:轻按按钮,事件触发一次,长按按钮,则事件需要不停的触发,微信没有提供这个方法,需要开发者自身去完成。
逻辑分析
当按钮按下, 此时获取得到按下的时间戳和一个按钮的状态, 写入this.data里面, 写入成功后, 开启一个递归函数, 首先是得到当前时间戳, 取出开始的时间戳, 二者做对比, 当大于设定值如200毫秒, 则为长按时间, 若小于, 则为单击事件, 当按钮松开, 改变按钮状态, 清除计时器.
代码实现
touchStart: function(e){
let timeStart = this.getTime();
let isTouch = true;
this.setData({timeStart, isTouch}, this.getNum)
}
touchEnd: function(){
this.setData({ isTouch: false }, this.getNum)
}
getNum: function(){
let { timeStart, isTouch } = this.data;
let timeNow = this.getTime();
let timeNum = 200;
let num = timeNow - timeStart;
let touchType = num < timeNum ? '单击': '长按';
if(isTouch){
// fnc 执行想要做的事
this.timer = setTimeout(this.getNum, 100)
}
else{
clearTimeout(this.timer)
}
}
getTime: function(){
let time = new Date()
return time.getTime()
} //获取当前时间的毫秒数
微信小知识
this.setData为一个异步函数, 如果有业务需要当数据写入成功后执行的话,可以使用这个方法来执行
this.setData({}, cb) cb 为回调函数
BUG修改
虽然按照以上情况能实现预期效果,但是还不够完美,经过实测,当快速点击并松开(在100ms内),想要执行的函数并不会触发,为了能兼容这种情况,我做出了一点改变,添加了一个bindtap函数,并在添加一个状态来判断是否触发执行函数
//bindtap 函数
tap: function(){
let { isSend } = this.data
if(!isSend){
// fnc 执行函数
}
}
//getNum 做适应性改变
getNum: function(){
let { timeStart, isTouch, isSend } = this.data;
let timeNow = this.getTime();
let timeNum = 200;
let num = timeNow - timeStart;
let touchType = num < timeNum ? '单击': '长按';
if(isTouch){
// fnc 执行想要做的事
this.setData({isSend: true }) // 添加的代码
this.timer = setTimeout(this.getNum, 100)
}
else{
clearTimeout(this.timer)
this.setData({ isSend:false }) //添加的代码
}
}
//
因为水平有限,只能通过这种方式来进行修改,如果有更好的方法,欢迎提出意见和建议。
作者:pwye
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。