小程序防止多次点击

点击事件是页面跳转 当点击事件是页面跳转时，不太适合显示加载框，但小程序的页面跳转并不是很快，如果不作处理又会导致用户反复点击打开多个页面，这里可以使用限制按钮或控件的点击间隔的方式处理，同样可以将这个方法放到公共的代码里面比如util，然后在使用时直接调用即可。

function buttonClicked(self) { self.setData({

buttonClicked: true

})

setTimeout(function () { self.setData({

buttonClicked: false

})

}, 500)

}

首先需要在页面对应的js文件里面增加一个buttonClicked数据对象，然后在点击事件里面调用上述方法。

Page({

data: {

buttonClicked: false

},

click: function (e) {

util.buttonClicked(this); var id = e.currentTarget.dataset.id;

wx.navigateTo({

url: '../detail/detail?id=' + id

})

},

})

另外，在wxml的点击控件中通过buttonClicked判断是否可以点击，可以用bindtap也可以用disabled

<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />

<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />

<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />

 

 

 

更新一下

————————————————————————————

关于快速点击时重复打开页面的解决方案 

可以通过css的pointer-events:none来解决。

 

 

在app.wxss增加以下内容：

/*

* 如果添加了hover-class属性，

* 在点击时会添加hover-class，并维持400ms后移除

*【注意：对于如果超过400ms仍未跳转的事件不起作用】

* 给这些hover类增加穿透属性，可防止重复点击问题

* 其中xxx-hover为自定义的hover类

*/

.navigator-hover, .xxx-hover {

   pointer-events: none; // 点击事件直接穿透到下层元素，即跳过这个链接或者按钮

}

  

WXML页面上例子：

自定义事件：

<view class='field' hover-class='navigator-hover' hover-stay-time='默认400，可自行更改' bindtap='test'></view> 

普通链接（自带navigator-hover）：    

<navigator url='xxx'>链接navigator> 

 

PS：在测试的时候发现对于button似乎不太好使。

参考：https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=000caed01d8ca8fa7c1734f3b51c04

 

文章来源：刘俊涛的博客

地址：http://www.cnblogs.com/lovebing

欢迎关注，有问题一起学习欢迎留言、评论。