微信小程序：长按点击事件实现

在做小程序的时候经常遇到本地缓存影响使用的问题，于是萌生一个需求：长按头像实现本地缓存数据的清理，查看小程序官方API，官方提供了几种点击事件，其中包含长按点击事件（点击此处查看官方API文档）

先上最终实现效果图：

长按点击事件实现效果图

查看官方给出的API文档，发现可以有两种解决方案，简单粗暴，直接上方案：

方案一：使用官方给出的长按点击事件longpress事件进行实现，

Step1：wxml中为图片绑定点击事件，事件类型为长按（手指触摸后，超过350ms立即触发该事件）

<image bindlongpress='longPress' src='{{userInfo.avatarUrl}}'></image>

Step2:js中实现绑定的长按点击事件

longPress:function(){

    wx.showModal({ //使用模态框提示用户进行操作

         title:'警告',

        content:'你将清空小程序本地所有缓存！',

        success:function(res){

             if(res.confirm){ //判断用户是否点击了确定

                 wx.clearStorageSync();

             }

       }

    })

}

方案一使用官方给出的长按事件实现，缺点是长按触发的时间为定值（350ms），时间较短，实际使用中长按效果并不明显。

方案二：根据官方给出的touchstart（触摸开始时间）和touchend（触摸结束时间）事件，设计可以自定义长按时长的点击事件

Step1：xml中为图片绑定一般点击事件bindtap

<image bindtouchstart='touchStart' bindtouchend='touchEnd' bindtap='pressTap'src="{{userInfo.avatarUrl}}"></image>

Step2：js中实现绑定的点击事件，在bindtap事件中进行判断，将获取的长按时长与自定义时长进行对比

touchStart:function(e){

    varthat=this;

    that.setData({

        touchStart:e.timeStamp

    })

},

touchEnd:function(e){

    varthat=this;

    that.setData({

        touchEnd:e.timeStamp

    })

},

pressTap:function(){

varthat=this;

vartouchTime=that.data.touchEnd-that.data.touchStart;

if(touchTime>1000){ //自定义长按时长，单位为ms

    wx.showModal({

        title:'警告️',

        content:'你将清空小程序本地所有缓存！',

        success:function(res){

            if(res.confirm){

                wx.clearStorageSync();

            }

        }

    })

 }

}

通过以上两种方式均可以实现长按点击事件，可以根据自身具体需求进行选择。