干掉微信小程序-避免多次点击,重复触发事件

干掉微信小程序-避免多次点击,重复触发事件

问题描述

开发小程序时,或者说是在做前端的时候,我们经常会遇到当用户点击某个按钮时,没有得到反馈的话,大部分用户都会接着点击,这就会造成前端接收到多次请求的响应。

这主要是因为后端api请求需要时间,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。

所以,接下来说说,在微信小程序中避免多次点击,重复触发事件的两种思路。

解决方法一:

使用 wx.showLoading 在请求执行之前显示一个加载框,请求完成后再关闭加载框。

js代码

 showLoading:function(message) {
  if (wx.showLoading) {
    // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
    wx.showLoading({
      title: message,
      mask: true
    });
  } else {
    // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
    wx.showToast({
      title: message,
      icon: 'loading',
      mask: true,
      duration: 20000
    });
  }
}

hideLoading:function() {
  if (wx.hideLoading) {
    // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
    wx.hideLoading();
  } else {
    wx.hideToast();
  }
}

解决方法二:

使用限制按钮或控件的点击时间间隔的方式处理。

js代码

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    this.buttonClicked(this);
  },
})
...  ...
buttonClicked:function (_this) {
  _this.setData({
    buttonClicked: true
  })
  setTimeout(function () {
    _this.setData({
      buttonClicked: false
    })
  }, 500)
}

wxml代码

<view bindtap="{{!buttonClicked?'click':''}}"" />
<button bindtap="{{!buttonClicked?'click':''}}" />
<button bindtap="click" disabled="buttonClicked" />

原文地址:https://www.cnblogs.com/lskreno/p/12248575.html

时间: 2024-10-28 10:48:07

干掉微信小程序-避免多次点击,重复触发事件的相关文章

微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一定时间的,连续点击按钮,还是有可能会重复调用的. 虽然这种情况有点极端,正常用户是不会这么连续快速的点击按钮的,但是也不能排除有用户手抖,连续点了两下.如果重复调用的话,不仅体验不好,单击事件中涉及到后端接口操作的也可能引起其他异常.所以这个问题还是要处理下的. 刚开始想到的是使用loading开启

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

微信小程序入门五: wxml文件引用、模版、生命周期

实例内容 wxml文件引用(include.import) 模版 小程序生命周期 实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到

小程序开发运营必看:微信小程序平台运营规范

一.原则及相关说明 ? 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ? 微信团队一直致力于将微信打造成一个强大的.全方位的服务工具.在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信内搭建和实现特定服务.功能的平台.通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力.运营环境和规则体系,进而帮助更多的企业和服务提供

WordPress版微信小程序2.2.8版发布

距离上次更新已经一个月了,这期间对WordPress版微信小程序 做的不少小的更新和性能的优化,此次版本更新推出了两个比较重点的功能:点赞和赞赏.同时,优化了文章页面的功能布局,在评论区把常用的功能:转发,复制,点赞,赞赏,都集中在一个操作面板,同时为了不占用文章页面的空间,做了隐藏. WordPress版微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 了解程序的开发历程及开发技术,建议看看相关版本的更新文章: 1.

关于微信小程序的开发步骤

~~~~包子最近在研究小程序 首先先讲一下小程序一些基本的步骤: 1.登录微信的公众平台,选择小程序,注册一个账号,期间有碰到什么交300块钱的就不要理他,因为我只是做demo,当然,准备上线的企业啥的得交,因为你不交你就审核不过去 2.注册完之后,首先在首页那里下载微信小程序开发工具,点击下载.然后安装 3.在下载开发工具的同时,我们去查一下自己的APPId..这个不要随便给别人看哦,,保密哒..... 4.接下来我们打开我们下载的微信开发工具,扫一下我们绑定的二维码,新建项目,选择一个空的目

微信小程序之数据绑定(五)

前几篇讲述微信小程序开发工具使用.生命周期和事件. 本次讲述微信小程序数据和视图绑定 >>>数据视图绑定 做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性. 以下数据和对象等同. 传统的视图和数据绑定 那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流. 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用程序作出相应的变化. 简单的讲,对

微信小程序商店 | 即速商店_二手类小程序

即速应用商店_分类最齐全的小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可免费发布 自己的小程序获取巨大流量 . PS:关于微信小程序商店_即速商店?   如何免费发布微信小程序,获取流量? 微信小程序商店|即速商店_二手小程序 要求:本次安利的可是二手类福利小程序,专业回收/出售各种闲置商品!注意,想在该类目下提交的微信小程序须具备购物.二手相关属性.如小程序内发布虚假违法信息,由小程序主体承担.点击 > 即刻提交 < 本期二手小

微信小程序商店 | 即速商店_福利类小程序

即速应用商店_分类最齐全的小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可免费发布 自己的小程序获取 巨大流量 . PS:关于微信小程序商店_即速商店?   如何免费发布微信小程序,获取流量? 微信小程序商店|即速商店_福利小程序 要求:本次安利的可是一堆堆福利小程序,各大电商自有平台优惠券代金券随便领!注意,想在该类目下提交的微信小程序须具备购物.福利相关属性.如小程序内发布虚假违法信息,由小程序主体承担.点击 > 即刻提交 <