zoukankan      html  css  js  c++  java
  • 干掉微信小程序-避免多次点击,重复触发事件

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

    问题描述

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

    这主要是因为后端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" />
    
  • 相关阅读:
    mysql查找有某列但没有此列索引的表
    mysql找到所有索引
    mysq在某一刻同时获取主从库的位置点
    新书《深入应用C++11:代码优化与工程级应用》出版,感谢支持
    c++11实现一个简单的lexical_cast
    应该用bind+function取代虚函数吗?
    《深入应用C++11:代码优化与工程级应用》开始发售
    一个更好的C++序列化/反序列化库Kapok
    C++技术沙龙主要内容
    C++11模版元编程
  • 原文地址:https://www.cnblogs.com/lskreno/p/12248575.html
Copyright © 2011-2022 走看看