小程序按钮避免多次调用接口和点击方案实现(不
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了小程序按钮避免多次调用接口和点击方案实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
本来是用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}}" />
到此这篇关于小程序按钮避免多次调用接口和点击方案实现(不用showLoading)的文章就介绍到这了,更多相关小程序按钮避免多次点击内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！