小程序模板网

在小程序中做一个单击长按判断

事情的起源

在做项目的过程中,遇到这么一个需求:轻按按钮,事件触发一次,长按按钮,则事件需要不停的触发,微信没有提供这个方法,需要开发者自身去完成。

 

逻辑分析

当按钮按下, 此时获取得到按下的时间戳和一个按钮的状态, 写入this.data里面, 写入成功后, 开启一个递归函数, 首先是得到当前时间戳, 取出开始的时间戳, 二者做对比, 当大于设定值如200毫秒, 则为长按时间, 若小于, 则为单击事件, 当按钮松开, 改变按钮状态, 清除计时器.

 

代码实现

 

				
  1. touchStart: function(e){
  2. let timeStart = this.getTime();
  3. let isTouch = true;
  4. this.setData({timeStart, isTouch}, this.getNum)
  5. }
  6.  
  7. touchEnd: function(){
  8. this.setData({ isTouch: false }, this.getNum)
  9. }
  10.  
  11. getNum: function(){
  12. let { timeStart, isTouch } = this.data;
  13. let timeNow = this.getTime();
  14. let timeNum = 200;
  15. let num = timeNow - timeStart;
  16. let touchType = num < timeNum ? '单击': '长按';
  17. if(isTouch){
  18. // fnc 执行想要做的事
  19. this.timer = setTimeout(this.getNum, 100)
  20. }
  21. else{
  22. clearTimeout(this.timer)
  23. }
  24. }
  25.  
  26. getTime: function(){
  27. let time = new Date()
  28. return time.getTime()
  29. } //获取当前时间的毫秒数
 

微信小知识

this.setData为一个异步函数, 如果有业务需要当数据写入成功后执行的话,可以使用这个方法来执行  this.setData({}, cb) cb 为回调函数

 

BUG修改

虽然按照以上情况能实现预期效果,但是还不够完美,经过实测,当快速点击并松开(在100ms内),想要执行的函数并不会触发,为了能兼容这种情况,我做出了一点改变,添加了一个bindtap函数,并在添加一个状态来判断是否触发执行函数

 

				
  1. //bindtap 函数
  2. tap: function(){
  3. let { isSend } = this.data
  4. if(!isSend){
  5. // fnc 执行函数
  6. }
  7. }
  8.  
  9. //getNum 做适应性改变
  10. getNum: function(){
  11. let { timeStart, isTouch, isSend } = this.data;
  12. let timeNow = this.getTime();
  13. let timeNum = 200;
  14. let num = timeNow - timeStart;
  15. let touchType = num < timeNum ? '单击': '长按';
  16. if(isTouch){
  17. // fnc 执行想要做的事
  18. this.setData({isSend: true }) // 添加的代码
  19. this.timer = setTimeout(this.getNum, 100)
  20. }
  21. else{
  22. clearTimeout(this.timer)
  23. this.setData({ isSend:false }) //添加的代码
  24. }
  25. }
  26. //

因为水平有限,只能通过这种方式来进行修改,如果有更好的方法,欢迎提出意见和建议



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24331.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询