-
2018-12-08 13:55:38
由于某个需求需要使用到双击事件,而小程序并没有双击事件,so
双击事件其实就是两次单击的时间相差小于300ms
双击和单击并存时的实现
doubleClick(e){ //e.timeStamp:当前点击时的毫秒数; // this.touchStartTime: 储存上一次点击时的毫秒数,默认0 if (e.timeStamp - this.touchStartTime < 300){ 双击,进入 } this.touchStartTime = e.timeStamp; 单击 }
更多相关内容 -
小程序双击事件
2020-03-17 09:56:01代码: <button data-time="{{lastTapTime}}" data-title="标题" bindtap="doubleClick"&...双击</button> js data: { lastTapTime:0, }, doubleClick: function (e) { var curTime = e.timeStamp ...代码:
<button data-time="{{lastTapTime}}" data-title="标题" bindtap="doubleClick">双击</button>
js
data: { lastTapTime:0, }, doubleClick: function (e) { var curTime = e.timeStamp var lastTime = e.currentTarget.dataset.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据 console.log("上一次点击时间:"+lastTime) console.log("这一次点击时间:" + curTime) console.log('------------------------------'); if (curTime - lastTime > 0) { if (curTime - lastTime < 300) {//是双击事件 console.log("挺快的双击,用了:" + (curTime - lastTime)) } } this.setData({ lastTapTime: curTime }) },
-
微信小程序双击事件,事件冒泡,bangtap,catchtap事件绑定
2021-03-29 19:55:32一:单击、双击及长按事件 事件绑定 事件绑定的写法同组件的属性,以 key、value 的形式。 key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart value 是一个字符串,需要在对应的 Page 中定义... -
uni-app 小程序双击事件
2021-01-29 11:22:06uni-app 小程序双击事 目前uni-app view标签不支持双击事件,下面自定义双击事件: // A code block <view @click="handClick(index)"></view> data(){ return { lastTapTimeoutFunc:null, ...uni-app 小程序双击事
目前uni-app view标签不支持双击事件,下面自定义双击事件:
// A code block <view @click="handClick(index)"></view>
data(){ return { lastTapTimeoutFunc:null, lastTapDiffTime:0 } }, methods:{ // 单击或双击 handClick(index) { let _this = this; let curTime = new Date().getTime(); let lastTime = _this.lastTapDiffTime; _this.lastTapDiffTime = curTime; //两次点击间隔小于300ms, 认为是双击 let diff = curTime - lastTime; if (diff < 300) { console.log("双击") //_this.handleVideo('screen',index)自定义事件 clearTimeout(_this.lastTapTimeoutFunc); // 成功触发双击事件时,取消单击事件的执行 } else { // 单击事件延时300毫秒执行 _this.lastTapTimeoutFunc = setTimeout(function() { console.log("单击") //_this.handleVideo('playOrStop',index)自定义事件 }, 300); } } }
-
微信小程序定义双击事件
2018-11-15 14:03:10微信小程序暂不支持绑定双击事件,要想实现双击事件,只能通过我们写代码判断用户点击是否是双击行为,主要的技术点就是:记录下用户两次点击的时间戳,两个时间戳相减如果小于300毫秒,则是双击事件。 具体代码...微信小程序暂不支持绑定双击事件,要想实现双击事件,只能通过我们写代码判断用户点击是否是双击行为,主要的技术点就是:记录下用户两次点击的时间戳,两个时间戳相减如果小于300毫秒,则是双击事件。
具体代码如下:
.wxml
<button data-time="{{lastTapTime}}" data-title="标题" bindtap="doubleClick">双击</button>
.js
data: { lastTapTime:0, },
doubleClick: function (e) { var curTime = e.timeStamp var lastTime = e.currentTarget.dataset.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据 console.log("上一次点击时间:"+lastTime) console.log("这一次点击时间:" + curTime) console.log('------------------------------'); if (curTime - lastTime > 0) { if (curTime - lastTime < 300) {//是双击事件 console.log("挺快的双击,用了:" + (curTime - lastTime)) } } this.setData({ lastTapTime: curTime }) },
-
微信小程序的点击、双击、长按事件
2019-04-09 20:54:23点击事件是最常用的事件,轻点即可触发事件,如果想要添加参数即可通过 data-加事件名 的方式添加参数,通过 event参数的target.dataset.加事件名 获取。我们来看看样例: wxml代码: <view class='container'... -
【微信小程序】需要开发者自定义的双击事件
2018-06-07 21:21:37amp;amp;aid=1940 ...微信官方文档没有双击事件,需要开发者自己定义处理。 // wxml &lt;button data-time="{{lastTapTime}}" data-title="标题" bind... -
微信小程序的双击事件
2018-04-16 13:04:45index.jsPage({ data: { starTime: 0, ClickNum: 0, show:false },//点击事件 myClick: function (e) { var that = this var curTime = e.timeStamp; var starTime= this.data.starTime; if (th... -
微信小程序实现同时单击、双击、长按
2021-03-29 21:25:22微信小程序实现同时单击、双击、长按有时候我们需要在小程序中实现一个组件同时拥有单击、双击和长按三种操作,但是微信只提供了单击和长按事件绑定,而且如果一个组件同时绑定了单击双击事件,在长按时,也会触发单... -
脱坑之旅-微信小程序双击事件
2017-10-10 21:53:02微信小程序双击事件官方暂未提供方法 所以现在解决方案为利用两次点击事件时间差判断双击事件 废话不多说,上方案! 现在网上提供的解决方案: 笔者用上述解决方案时出现了一个不小的坑。。。。。。。。 这... -
微信小程序图片放大预览,并双击可缩小的原始比例
2019-04-09 16:20:21微信小程序图片放大预览,并双击可缩小的原始比例,利用scroll-view实现 -
如何监听小程序中的手势事件(缩放、双击、长按、滑动、拖拽)
2019-09-25 01:49:52分享一个为小程序定制的手势监听事件库-YrobotTouch 原文连接:https://developers.weixin.qq.com/community/develop/article/doc/000006d3814318eff728a86b65b413 YrobotTouch-WXLP YrobotTouch,一个方便、轻量... -
uni-app、小程序中设置双击事件
2020-02-17 17:22:04export default { components: { ... touchStartTime: 0, // 触摸开始时间 用来判断是否是双击 } }, methods: { //判断是否是双击 onSet: function(e) { //console.log(new Date().ge... -
微信小程序 VIdeo视频组件双击事件
2019-03-08 14:45:46console.log("双击事件,用了:" + (curTime - lastTime)); wx.showToast({ title: '双击', icon: 'success', duration: 2000 }) } } this.setData({ lastTapTime: curTime }) } }) wxss .... -
微信小程序自定义双击、三击、N击事件
2020-04-27 17:00:40声明两个参数 data: { clickNum:1, ...单击事件: btnclick:function(e){ var me=this; var curTime = e.timeStamp //获取时间戳 var lastTime = me.data.lastTapTime; //第一次获取为零 c... -
小程序自定义tabbar双击切换问题汇总
2021-02-25 15:00:27小程序自定义的tabbar按照官方的文档使用时,会出现点击无法切换底部tabbar, 双击才能切换的问题,没有去找原因,直接从网上看了一个相对好的方法, 警示后来者…… 解决方法 在底部tabbar要跳转的页面的onshow... -
小程序单击、双击、长按、滑动、双指缩放事件详解
2020-05-30 13:49:25单击事件由touchstart、touchend组成,touchend后触发tap事件。 <view> <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button> <... -
微信小程序实现单击、双击、滑动、长按事件响应
2020-05-26 22:29:43》》》什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息... -
微信小程序点击事件失效
2019-11-07 10:55:05今天经理突然跑过来问,为什么点击不了,找了下百度才知道换个标签就得了,奇怪的是之前一直都是可以的 -
微信小程序的事件大全
2021-05-06 14:57:39这里写目录标题bind与catch的区别----------------点击事件(单击):bindtap双击事件长按事件:bindlongpress、bindlongtap长按与点击事件的执行顺序与关系----------------键盘输入事件:bindinput输入框聚焦:... -
小程序实现点击/单击,长按,双击事件及setTimeout函数使用
2019-01-10 17:41:20手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替) ps:longtap 是先触发长按,后触发单击 我们也... -
微信小程序-双击长按触发longtap事件时同时触发tap事件解决办法
2016-12-20 13:05:42对于微信事件,不多说,自己看文档...首先,注意一下微信小程序事件触发顺序 单击 touchstart → touchend → tap 双击 touchstart → t -
uni-app双击事件(单击、双击互不干扰)
2021-03-09 14:32:49uni-app中绑定双击事件 功能需求 在uni-app中,很多时候我们需要元素绑定双击事件,比如自定义的视频播放器,双击播放、暂停,但是显示进度条、隐藏进度条。 但是在uni-app官方并没有提供双击事件,那么就需要我们... -
Taro小程序Canvas缩放、平移、双击重置
2021-12-20 15:14:09举例: 在双指缩放时,我们一定用的是小程序的Canvas手指触摸移动事件。 经过测试直接使用双指缩放,然后用单手拖动,再用双指缩放,再用单指拖动。 Canvas给您返回的touches数组会一直是2个。正常情况下单指返回1... -
微信小程序——绑定点击事件
2018-06-16 12:00:01微信小程序出来了那么长时间了,之前一直准备升学和毕业设计(过段时间我要写一写我的毕业设计),最近马上毕业了,终于有时间来研究一下了,先从最简单的点击事件开始吧!首先我们在test.wxml中加入以下代码: &... -
Java GUI 小程序 双击直接运行
2011-10-04 23:25:23Java GUI 小程序 , 安装了 jre后双击直接运行。。。新手可以看看 -
微信小程序5分钟实现双击点击底部导航栏,页面滚到顶部(含全部代码)
2019-07-30 00:58:49受微信文档:自定义 tabBar启发,让我有一个想法:是否微信小程序也可以像微博那样,双击底部导航栏就可以实现自动滚动到当前页面顶端? 答案是肯定的。 首先,我们根据文档的介绍,tabBar的配置信息,添加tabBar ... -
微信小程序 触控事件
2017-03-29 16:42:30微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。 接下来把文档copy过来 原文地址:... -
微信小程序(触控事件)
2019-08-28 17:39:49事件简介 ①本质:事件是视图层到逻辑层的通讯方式 ②作用:事件可以将用户的行为反馈到逻辑层进行处理 ③应用:事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数 ④参数:事件对象可以...