小程序按钮避免多次点击 小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
早饭君 人气:0本来是用showLoading的,点击直接转菊花,但是呢,showLoading和 showToast这个方法是冲突的,你转了菊花不能弹toast提示,在某个页面需要提交一次表单和做输入验证,测试说可以点击多次
然后想到可以用一个变量判断是否点击了,然后500毫秒后自动回来
写在公共的utils方法里面
// 防止多次点击 function btnClickedFun(self) { self.setData({ btnClicked: true }) setTimeout(() => { self.setData({ btnClicked: false }) }) }
js 代码
Page({ data: { btnClicked: false }, click: function (e) { utils.btnClickedFun(this); // 各种处理代码 if (!form[json.departmentId]) { utils.showToast('请选择所属部门') return } ... // 各种处理代码 utils.showLoading() 开始调接口 }, })
html代码
<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" /> <button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" /> <button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />
加载全部内容