精华内容
下载资源
问答
  • 微信小程序长按事件

    2020-08-08 11:27:35
    因为之前都用的很简单的bindtap事件,那么该怎么实现长按事件呢? 什么是长按事件? 点击不放,并达到一定时长后再松开。 那么我们的思路就来了,canvas里有属性可以帮到我们 那么我们是不是得到开始和结束的时间...

    碰到一个需求,长按空白处出现换壁纸的弹窗。

    因为之前都用的很简单的bindtap事件,那么该怎么实现长按事件呢?

    什么是长按事件?

    点击不放,并达到一定时长后再松开。

    那么我们的思路就来了,canvas里有属性可以帮到我们

    在这里插入图片描述
    在这里插入图片描述
    那么我们是不是得到开始和结束的时间差不就可以判断是不是长按了吗?

    属性的使用

    <view  bindtouchstart="touchstart" bindtouchend="touchend"> </view>
    

    对事件的判断

      //touch start
      touchstart: function(e) {    
         this.startTime = e.timeStamp;
         console.log(this.startTime)   
       },  
    
      //touch end 
      touchend: function(e) {    
         this.endTime = e.timeStamp;   
         console.log(this.endTime)     
         console.log("endTime - startTime = " + (this.endTime-this.startTime)); 
         if (this.endTime - this.startTime>600){      
    		console.log('长按')   
           }  
      }
    

    顺序是bindtouchstart—>bindtouchend

    展开全文
  • 大家都知道 微信中是提供了 长按事件 1、longpress 2、longtap,道理都懂,就是长按(约350ms)后会触发事件 这里是就踩了一个坑,业务场景是这样的,长按当前区域,出现对应的业务逻辑(如 批量删除等), 自然想到...

    大家都知道 微信中是提供了 长按事件 1、longpress 2、longtap,道理都懂,就是长按(约350ms)后会触发事件

    这里是就踩了一个坑,业务场景是这样的,长按当前区域,出现对应的业务逻辑(如 批量删除等),
    自然想到了长按时,触发一个布尔值的改变,从而 控制对应区域的显示或者隐藏 (wx:if 或者(uni-app)的v-if)

    一切都很顺利,长按后也出现了对应的效果,可当再次点击当前区域的时候,第一次点击事件无效,第二次才生效,找了很久才发现,原因在于 当你 长按时,当前区域被 v-if替换,导致这个长按事件并没有监听到结束,(个人理解),进而导致第一次点击事件 总是无效

    改进方法–通过css来控制 display none block

    展开全文
  • java微信小程序长按识别太阳码(偶尔得到的,不是我写的),可以截取长方形头像图片剪切成圆形头像。详情见源码。
  • 微信小程序 长按事件 删除图片

    千次阅读 2019-01-30 15:59:00
    1:页面代码   2:js代码  deleteImage: function (e) { var that = this; var images = that.data.images;...1:长按事件是用bindlongpress(不会跟点击事件bindtap冲突);

    1:页面代码

    <view class="uploader__files">

    <block wx:for="{{images}}" wx:key="{{item.id}}" >

    <view class="uploader__file" bindlongpress="deleteImage" data-index="{{index}}">

    <image mode="aspectFill" class="uploader__img" src="{{item}}" />

    </view>

    </block>

    </view>

     

    2:js代码 

    deleteImage: function (e) {
        var that = this;
        var images = that.data.images;
        var index = e.currentTarget.dataset.index;//获取当前长按图片下标
        wx.showModal({
          title: '提示',
          content: '确定要删除此图片吗?',
          success: function (res) {
            if (res.confirm) {
              console.log('点击确定了');
              images.splice(index, 1);
            } else if (res.cancel) {
              console.log('点击取消了');
              return false;
            }
            that.setData({
              images
            });
          }
        })
      }

    要点:

    1:长按事件是用bindlongpress(不会跟点击事件bindtap冲突);

    展开全文
  • 微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG 实例代码 wxml <view class="container"> <view> <button bindtap="tap" ...

    微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG

    实例代码

    • wxml

    <view class="container">
      <view>
        <button bindtap="tap" bindlongtap="longtap">长按我</button>
      </view>
    </view>
    • js

    Page({
      data: {
      },
      tap: function() {
        console.log('触发了 tap')
      },
      longtap: function () {
        console.log('触发了 longtap')
      }
    })
    • 效果

    longtap触发tap演示

    解决方法

    Google后确定是小程序有意(B)为(U)之(G)后,看了一下网上的解决方法,基本都是通过touchstarttouchend重新判定taplongtap事件的,个人不是很喜欢。

    看一下微信小程序的事件定义:

    • tap, 手指触摸后马上离开

    • longtap, 手指触摸后,超过350ms再离开

    也就是说,目前的触发的顺序是 longtap -> touchend -> tap

    那么其实解决也很清晰了,简单来说就是 加把锁, 应用到上面的代码上:

    Page({
      data: {
        lock: false
      },
      tap: function() {
        //检查锁
        if (this.data.lock) {
          return;
        }
        console.log('触发了 tap')
      },
      touchend: function() {
        if (this.data.lock) {
          //开锁
          setTimeout(() => {
            this.setData({ lock: false });
          }, 100);
        }
      },
      longtap: function () {
        //锁住
        this.setData({lock: true});
        console.log('触发了 longtap')
      }
    })

    看一下效果

    longtap触发tap演示

    延伸

    大部分情况下,我们都是不需要在touchend中加锁的,因为长按操作会触发其他的异步操作,只要保证异步操作的最后把锁解除了即可。

    展开全文
  • 通过测试,我们发现,小程序事件执行的顺序是 点击:touchstart → touchend → tap 长按 touchstart → longtap → touchend → tap 解决方案 abc.wxml <view bindtouchstart="bindTouchStart" bindtouchend=...
  • 主要介绍了微信小程序webview实现长按点击识别二维码功能,结合实例形式分析了webview二维码识别相关操作技巧,需要的朋友可以参考下
  • 微信小程序实现长按拖拽排序 左滑删除DragSort-master-master.zip
  • @longpress长按事件 <template> <view class="img-parent"> <block v-for="(item,index) in arrList" v-key="index"> <view @longpress="deleteImage" :data-index="index"> <...
  • 主要介绍了微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • bindlongpress:长按事件 wx.getImageInfo:获取图片信息方法 wx.saveImageToPhotosAlbum:保存图片到相册方法 注意:saveImageToPhotosAlbum这个方法不支持网络地址,所以需要getImageInfo方法,转.
  • 业务要求是小程序放一个二维码图片,长按可以识别二维码,进而识别出个人微信,添加个人微信;我们可以通过uni.previewImage(OBJECT)或者wx.previewImage(Object object) 预览当前图片去实现
  • 微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG 实例代码 wxml <view class="container"> <view> <button bindtap="tap" ...
  • 小程序实现长按删除指定图片需要解决的问题长按事件如何表示出来?如何获取当前长按元素的下标?如何删除元素?小程序实现长按删除指定图片解决办法长按事件是用bindlongpress(不会跟点击事件bindtap冲突);在wxml中添加...
  • 微信小程序长按属性

    2021-02-19 16:02:32
    长按触发就是这个bindlongpress="xx
  • 微信小程序长按图片保存至相册

    千次阅读 2020-01-01 14:05:29
    长按图片」,是否授权保存图片or视频到相册,「授权成功」,点击「保存到相册」即可完成。 代码: wxml <image src="{{imgSrc}}" data-url="{{imgSrc}}" bindlongpress="saveImage"></image> js...
  • 微信小程序长按保存

    2020-06-15 19:49:40
    1. "image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别" 2.即便实现了 “wx.previewImage” 效果,但依旧是不支持二维码识别的 <image src="{{store.logo}}" mode=...
  • 本文实例为大家分享了微信小程序实现弹出菜单的具体代码,供大家参考,具体内容如下 菜单 代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 ...
  • 微信小程序长按事件 bindlongpress='handleDel' //适用于 icon / div 等
  • wxml部分 <view class="basic-row" wx:if="{{role == 1 || lavel == 1}}" bindlongtap="copyLess" data-info="我是复制的文本"> </view> `` js部分 //复制 copyLess:function(event){ ...
  • //判断是点击还是长按 点击不做任何事件长按 触发结束录像 if (this.endtime - this.starttime > 350) { //长按操作 调用结束录像方法 this.stopShootVideo(); } this.showProgress = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,247
精华内容 5,298
关键字:

微信小程序长按事件

微信小程序 订阅