本篇文章小编给大家分享一下小程序按钮避免多次调用接口和点击方案实现代码,文中代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
本来是用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代码