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

0.42字数 547阅读 10056

在做小程序的时候经常遇到本地缓存影响使用的问题,于是萌生一个需求:长按头像实现本地缓存数据的清理,查看小程序官方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();

            }

        }

    })

 }

}

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

推荐阅读更多精彩内容