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

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

赞 (0)

相关推荐

  • 微信小程序防止多次点击跳转（函数节流）

    微信小程序防止多次点击跳转（函数节流）

    场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数. /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null ||

  • 微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn

  • 微信小程序BindTap快速连续点击目标页面跳转多次问题处理

    问题描述: 1)wxml片段 <view bindtap="loadMulti"> <text>连续点击,加载多次</text> </view> <view bindtap="loadOnce"> <text>连续点击,加载一次</text> </view> 2)js代码片段 loadMulti:function(e) { wx.navigateTo({ url: '/p

  • 详解小程序如何避免多次点击，重复触发事件

    作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮.这对于我们开发来说,这是bug. 如何解决或避免这个问题呢?一般来说有两种情况. 1.点击事件是执行网络请求(提交评论,验证码,支付) 这种情况下可以在请求执行之前显示一个模式的加载框,请求完成后再关闭加载框. 由于小程序在1.1.0版本基

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

    本来是用showLoading的,点击直接转菊花,但是呢,showLoading和 showToast这个方法是冲突的,你转了菊花不能弹toast提示,在某个页面需要提交一次表单和做输入验证,测试说可以点击多次 然后想到可以用一个变量判断是否点击了,然后500毫秒后自动回来 写在公共的utils方法里面 // 防止多次点击 function btnClickedFun(self) { self.setData({ btnClicked: true }) setTimeout(() => { se

  • 微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法

    微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml <view class="content"> <view class="sliderContent"> <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" /&

  • 微信小程序按钮去除边框线分享页面功能

    有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有button有 open-type="share"这个属性,使用image标签肯定不行.我是这样做的: <button open-type="share" style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >

  • 微信小程序按钮点击跳转页面详解

    微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序按钮点击动画效果的实现

    动画效果如下: GIF看起来可能会有点卡 wxml <view class="confirm bubble">确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{

  • 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class. 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> <view class='list-fix' wx:if="{{mengShow}}" bindt

  • 详解小程序中h5页面onShow实现及跨页面通信方案

    小程序webview的现状 h5页面在小程序中的交互(跳转)场景 h5跳转小程序native页面(如:调用小程序地址选择能力,然后返回对应的地址信息给h5页面) h5跳转己方业务线的h5页面(内部页面交互,方式比较多样) h5跳转其它业务线的h5页面(如:交易流程,相关页面可能有其他业务线提供) 主要痛点 在完成相关操作后, 页面状态需要更新 ,目前常见的更新方式有如下两种: 第一种:通过url传参(如:url中加入__isonshowrefresh=1,告诉webview再次onshow时候刷

  • 微信小程序模板消息推送的两种实现方式

    最近在做微信小程序,为了让用户能更加方便的获取到小程序内部的通知,便想着用模板消息来解决此类问题.首先介绍一下两种方法 第一种是传统的按照微信开发文档来实现模板消息的获取,首先要明确的是你要有一个第三方的服务器,因为微信现在规定在小程序内部不能直接请求微信的服务器,而是要请求第三方服务器,由第三方服务器来请求微信的服务器 1.传统方式实现模板消息 1.1获取用户openId 这一步可以在wx.login方法内获取,用来标注模板消息的接受者 1.2获取模板ID 有两个方法可以获取模版ID 通过模版

  • 微信小程序 检查接口状态实例详解

    微信小程序 检查接口状态实例详解 实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()

  • 微信小程序实现获取小程序码和二维码java接口开发

    前言:目前小程序推出了自己的识别码,小程序码,这个圆形的码看起来比二维码好看.本文总结微信小程序的获取小程序码和二维码并生成二维码图片的接口开发.主要内容摘抄自微信小程序的API文档,java接口开发是自己总结开发. 微信小程序API文档:获取二维码 一.简介 通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面.目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示: 二.获取小程序码 目前有两个接口可以生成小程序码,开发者可以根据自己的需要选择合

随机推荐