技术研讨微信小程序

解决微信小程序跳转重复点击

项目中微信小程序的跳转如果快速点击两次会重复跳转

Posted by Warden_Gfs on October 10, 2017

点击事件是页面跳转

当点击事件是页面跳转时，不太适合显示加载框，但小程序的页面跳转并不是很快，如果不作处理又会导致用户反复点击打开多个页面，这里可以使用限制按钮或控件的点击间隔的方式处理，同样可以将这个方法放到公共的代码里面比如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="" data-id="" /> 
<button bindtap="" data-id="" /> 
<button bindtap="click" disabled="buttonClicked" data-id="" />