精华内容
下载资源
问答
  • 微信小程序定义双击事件
    千次阅读
    2018-11-15 14:03:10

    微信小程序暂不支持绑定双击事件,要想实现双击事件,只能通过我们写代码判断用户点击是否是双击行为,主要的技术点就是:记录下用户两次点击的时间戳,两个时间戳相减如果小于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
        })
      },

     

    更多相关内容
  • 微信小程序双击事件

    2021-11-03 18:01:04
    e.timeStamp var lastTapTime = that.lastTapTime // 更新最后一次点击时间 that.lastTapTime = currentTime // 如果两次点击时间在300毫秒内,则认为是双击事件 if (currentTime - lastTapTime ) { // 成功触发双击...

    index.wxml

          <view>
            <input type="text"  bindtap="doubleClick" bindtouchstart="touchStart" bindtouchend="touchEnd" disabled="ture" model:id = "key" model:value="value"/>
          </view>

    index.js

    Page({
      data: {
        // 触摸开始时间
        touchStartTime: 0,
        // 触摸结束时间
        touchEndTime: 0,  
        // 最后一次单击事件点击发生时间
        lastTapTime: 0, 
        // 单击事件点击后要触发的函数
        lastTapTimeoutFunc: null, 
      },
      // 按钮触摸开始触发的事件
      touchStart: function(e) {
        this.touchStartTime = e.timeStamp;
      },
    
      // 按钮触摸结束触发的事件
      touchEnd: function(e) {
        this.touchEndTime = e.timeStamp;
      },
      doubleClick: function(e) {
    
        var that = this
        // 控制点击事件在350ms内触发,加这层判断是为了防止长按时会触发点击事件
        if (that.touchEndTime - that.touchStartTime < 350) {
          // 当前点击的时间
          var currentTime = e.timeStamp
          var lastTapTime = that.lastTapTime
          // 更新最后一次点击时间
          that.lastTapTime = currentTime
    
          // 如果两次点击时间在300毫秒内,则认为是双击事件
          if (currentTime - lastTapTime < 300) {
            // 成功触发双击事件时,取消单击事件的执行
            clearTimeout(that.lastTapTimeoutFunc);
            wx.showModal({
              title: '提示',
              content: '触发成功',
              showCancel: false
            })
    
          }
        }
      },

    展开全文
  • 一:单击、双击及长按事件 事件绑定 事件绑定的写法同组件的属性,以 key、value 的形式。 key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart value 是一个字符串,需要在对应的 Page 中定义...
  • 转载于:https://www.cnblogs.com/gqx-html/p/8302757.html

    转载于:https://www.cnblogs.com/gqx-html/p/8302757.html

    展开全文
  • 点击事件是最常用的事件,轻点即可触发事件,如果想要添加参数即可通过 data-加事件名 的方式添加参数,通过 event参数的target.dataset.加事件名 获取。我们来看看样例: wxml代码: <view class='container'...

    一、点击事件

    点击事件是最常用的事件,轻点即可触发事件,如果想要添加参数即可通过 data- 加事件名 的方式添加参数,通过 event参数的target.dataset.加事件名 获取。我们来看看样例:

    wxml代码:

    <view class='container'>
      <button bindtap='test' data-name='tap'>bindtap</button>
    </view>

    js代码: 

    test:function(e){
        console.log("点击事件")
        console.log(e.target.dataset.name)
      }

    结果如下图:

     

    二、双击事件

    双击触发事件,微信官方文档没有,但是我们可以根据参数event的timeStamp属性对两次点击事件处理达到双击事件的目的,如果想要添加参数即可通过 data- 加事件名 的方式添加参数,通过 event参数的target.dataset.加事件名 获取。我们来看看样例:

    wxml与之前一致

    js代码:

    test: function(e) {
        // 获取这次点击时间
        var thisTime = e.timeStamp;
        // 获取上次点击时间 默认为0
        var lastTime = this.data.lastTime;
        // 打印这次点击时间
        console.log("这次时间:" + thisTime)
        // 打印参数
        console.log("参数:" + e.target.dataset.name)
        if (lastTime != 0) {
          if (thisTime - this.data.lastTime < 500)
            console.log("双击事件")
        }
        // 赋值
        this.setData({
          lastTime: thisTime
        })
      }

    运行截图如下:

    三、长按事件

    长按事件以前为bindlongtap,现在改为bindlongpress,如果想要添加参数即可通过 data- 加事件名 的方式添加参数,通过 event参数的target.dataset.加事件名 获取。我们来看看样例:

    wxml代码:

    <view class='container'>
      <button bindlongpress='test' data-name='tap'>bindlongpress</button>
    </view>

    js代码:

     test: function(e) {
        // 打印参数
        console.log("参数:" + e.target.dataset.name)
        //打印双击事件
        console.log("长按事件")
      }

     

    运行截图如下:

    四、总结

    值得一提的是:点击、双击、长按事件(bindlongtap)均会触发bindtouchstart、bindtouchend、tap(press)事件。他们关系如下:

    事件名触发顺序
    点击事件

    bindtouchstart - bindtouchend - tap

    双击事件bindtouchstart - bindtouchend - tap - bindtouchstart - bindtouchend - tap
    以前的长按事件(bindlongtap)bindtouchstart - bindlongtap - bindtouchend - tap
    *现在的长按事件(bindlongpress)bindtouchstart - bindlongpress - bindtouchend

     

     

     

     

     

     

    注意:如果一个组件拥有press和tap事件,那么点击触发tap事件,长按不会触发tap事件

    展开全文
  • 微信小程序图片放大预览,并双击可缩小的原始比例,利用scroll-view实现
  • 主要介绍了微信小程序实现点击页面出现文字,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • index.js 1 Page({ 2 data: { 3 starTime: 0, 4 ClickNum: 0, ... 7 //点击事件 8 myClick: function (e) { 9 var that = this 10 var curTime = e.timeStamp; 11 var starTime= th...
  • 主要为大家详细介绍了微信小程序实现列表页的点赞和取消点赞功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序穿透事件

    2022-03-18 14:19:34
    <cover-view/>内只能嵌套 <cover-view/>... // 使用的目的:解决穿透事件 例如遮罩层下面存在input textarea等标签 2.无法使用cover-view的情况下,用v-show对遮罩层下面的标签进行处理。 ...
  • 这里写目录标题bind与catch的区别----------------点击事件(单击):bindtap双击事件长按事件:bindlongpress、bindlongtap长按与点击事件的执行顺序与关系----------------键盘输入事件:bindinput输入框聚焦:...
  • 微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能 自动播放当前页视频 翻页停止播放当前页视频 并自动播放下页视频 有其他需求也可用 cover-...
  • 微信小程序 图片等比例缩放 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个...
  • Axure微信小程序元件库(.rplib)双击安装即可
  • 微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的。但领导要求了,总是要干的。 然后就实时通讯这个关键词展开搜索,穿梭于网页之间。不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到...
  • 微信小程序 触控事件微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。接下来把文档copy过来...
  • 主要介绍了微信小程序 蓝牙的实现实例代码的相关资料,需要的朋友可以参考下
  • 微信小程序点击事件失效

    千次阅读 2019-11-07 10:55:05
    今天经理突然跑过来问,为什么点击不了,找了下百度才知道换个标签就得了,奇怪的是之前一直都是可以的
  • 》》》什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以...
  • 脱坑之旅-微信小程序双击事件

    千次阅读 2017-10-10 21:53:02
    微信小程序双击事件官方暂未提供方法 所以现在解决方案为利用两次点击事件时间差判断双击事件 废话不多说,上方案! 现在网上提供的解决方案: 笔者用上述解决方案时出现了一个不小的坑。。。。。。。。 这...
  • 微信小程序实现同时单击、双击、长按有时候我们需要在小程序中实现一个组件同时拥有单击、双击和长按三种操作,但是微信只提供了单击和长按事件绑定,而且如果一个组件同时绑定了单击双击事件,在长按时,也会触发单...
  • 主要介绍了详解微信小程序回到顶部的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 但是tab如果不是自定义的tab,并没有双击事件,所以大概思路就是判断第一次点击时间和第二次的点击时间,如果小于3000ms,就刷新列表,回到顶部 还有就是当屏幕滚动到一定高度之后,动态替换当前页面的tab图片 首先...
  • uni-app 小程序双击事件

    千次阅读 2021-01-29 11:22:06
    uni-app 小程序双击事 目前uni-app view标签不支持双击事件,下面自定义双击事件: // A code block <view @click="handClick(index)"></view> data(){ return { lastTapTimeoutFunc:null, ...
  • 声明两个参数 data: { clickNum:1, ...单击事件: btnclick:function(e){ var me=this; var curTime = e.timeStamp //获取时间戳 var lastTime = me.data.lastTapTime; //第一次获取为零 c...
  • wx.showModal({ title: '提示', content: '双击事件被触发', showCancel: false }); }; }; }, /// 长按 longTap(e) { console.log("long tap"); wx.showModal({ title: '提示', content: '长按事件被触发', ...
  • amp;amp;aid=1940 ...微信官方文档没有双击事件,需要开发者自己定义处理。 // wxml &amp;lt;button data-time=&quot;{{lastTapTime}}&quot; data-title=&quot;标题&quot; bind...
  • 》》》什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 事件对象可以携带额外信息...
  • lastTapTime ) { console.log("double tap") // 成功触发双击事件时,取消单击事件的执行 clearTimeout(that.lastTapTimeoutFunc); //双击的时候放大图片 if (that.data[fileID] != ''){ wx.previewImage({ current...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,498
精华内容 3,399
关键字:

微信小程序双击事件

微信小程序 订阅