【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突

点击事件的执行：

<button bindtap="bindtap" bindtouchstart="touchstart" bindtouchend="touchend">按钮</button>

可以看到顺序为：touchstart → touchend → tap

长按事件的执行：

 <button bindtap="bindtap" bindlongtap="bindlongtap" bindtouchstart="touchstart" bindtouchend="touchend">按钮</button>

可以看到顺序为：touchstart → longtap → touchend → tap

当我们在一个标签上同时设置bindtap和bindlongtap时, 会发现长按时先触发bindlongtap的事件，松开后还会触发tap事件，就没有达到预期的效果。

场景：一个按钮长按时颜色发生变化，松开时颜色恢复，并且点击时无任何变化

思路：在data中用一个状态去维护，长按与松开时去改变这个状态然后控制颜色的变化

实现：

 <button bindlongtap="bindlongtap" bindtouchend="touchend" style="background-color: {{active? '#10C0D6' : '#e7fafd'}};"> </button>

data: {active: false
},bindlongtap() {this.setData({active: !this.data.active})
},touchend() {this.setData({active: !this.data.active})
}

可以发现长按与松开时确实达到了我们想要的效果，但是当我们点击按钮时，按钮的颜色也发生了变化，原因就是点击的时候也触发了touchend事件导致状态发生改变，没有达到我们的需求。

那么要如何判断是长按还是点击触发的touchend事件？

官方给出的界定是从触摸开始到触摸结束要超过350ms就是长按

那么我们可以在触摸开始的时候记录一个时间，在触摸结束的时候记录一个时间，借助事件对象的参数timeStamp

 <button bindlongtap="bindlongtap" bindtouchstart="touchstart" bindtouchend="touchend" style="background-color: {{active? '#10C0D6' : '#e7fafd'}};"> </button>

data: {active: false,startTimeStamp:0
},bindlongtap() {this.setData({active: !this.data.active})
},touchstart(e) {this.setData({startTimeStamp:e.timeStamp})
},touchend(e) {if(e.timeStamp - this.data.startTimeStamp < 350) {return false} else {this.setData({active: !this.data.active})}
}

【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突相关推荐

微信小程序实现点击拍照以及长按录像功能
话不多说,直接上代码,代码里面注释写的都很详细 wxml文件:  <camera wx:if="{{!videoSrc}}" device- ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序实现点击拍照长按录像功能
微信小程序实现点击拍照长按录像功能代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...
微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...

【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突

【微信小程序】解决点击(bindtap)和长按(bindlongtap)冲突相关推荐

最新文章

热门文章