当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序按钮避免多次调用接口和点击方案实现(不用showLoading)

小程序按钮避免多次调用接口和点击方案实现(不用showLoading)

2020年05月12日  | 移动技术网IT编程  | 我要评论

本来是用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)的文章就介绍到这了,更多相关小程序按钮避免多次点击内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网