小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
更新时间：2020年04月15日 14:13:34 作者：早饭君
这篇文章主要介绍了小程序按钮避免多次调用接口和点击方案实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本来是用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)的文章就介绍到这了,更多相关小程序按钮避免多次点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
BootStrap实现带有增删改查功能的表格(DEMO详解)
这篇文章主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧2016-10-10
这篇文章主要介绍了js根据鼠标移动速度背景图片自动旋转的方法,实例分析了javascript操作鼠标与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了扩展JS Date对象时间格式化功能，有需要的朋友可以参考一下2013-12-12
这篇文章主要为大家详细介绍了基于BootStrap实现城市三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了原生javascript实现简单的datagrid数据表格的方法，效果十分棒,需要的朋友可以参考下2015-01-01
JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解
闭包是可以包含自由（未绑定）变量的代码块；这些变量不是在这个代码块或者任何全局上下文中定义的，而是在定义代码块的环境中定义。本文主要介绍了javascript中的闭包,感兴趣的朋友一起看看吧2016-05-05
这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了原生JavaScript创建不可变对象的方法,结合简单实例形式分析了基于原生JavaScript创建不可变对象的相关原理、实现方法与操作注意事项,需要的朋友可以参考下2020-05-05
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，这篇文章主要介绍了js indexOf 的正确用法,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了微信小程序云开发之使用云存储，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论