微信小程序防止重复点击,该如何处理?

当用户点击按钮或控件时,如果响应比较慢,往往会重复点击,另外也会存在用户故意反复快速点击的情况,这种时候就会多次触发点击事件造成非期望的结果。如何解决或避免这个问题呢?一般来说有两种情况。 1、点击事件是执行请求 这种情况下可以在请求执行之前显示一个模式的加载框,请求完成后再关闭加载框,由于小程序在1.1.0版本基础库才支持wx.showLoading,因此需要对低版本做兼容处理,代码如下:

function showLoading(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
    });
  }
}

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

我们可以将显示加载框和关闭加载框的代码放在公共的代码里面比如util,然后在使用时直接调用即可。

function request() {
  util.showLoading('加载中...');
  wx.request({
    url: app.globalData.host + 'xxx',
    data: {...},
    method: 'GET',
    success: function (res) {
      util.hideLoading()
      ...
    },
    fail: function (res) {
      util.hideLoading()
      ...
    }
  })
}

2、点击事件是页面跳转 当点击事件是页面跳转时,不太适合显示加载框,但小程序的页面跳转并不是很快,如果不作处理又会导致用户反复点击打开多个页面,这里可以使用限制按钮或控件的点击间隔的方式处理,同样可以将这个方法放到公共的代码里面比如util,然后在使用时直接调用即可。

function buttonClicked(self) {  self.setData({
    buttonClicked: true
  })
  setTimeout(function () {    self.setData({
      buttonClicked: false
    })
  }, 500)
}

首先需要在页面对应的js文件里面增加一个buttonClicked数据对象,然后在点击事件里面调用上述方法。

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    util.buttonClicked(this);    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
})

另外,在wxml的点击控件中通过buttonClicked判断是否可以点击,可以用bindtap也可以用disabled

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

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Core Net

ASP.NET Core 2.0 : 四. _Layout与_ViewStart

2604
来自专栏逸鹏说道

使用fiddler模拟http请求

以前看见过,没发,现在又看见了,向大家推荐一下: 概述 与httpwath相比,fiddler能模拟http请求、能断点调试、http分析统计吸引了我,...

3605
来自专栏blackheart的专栏

[Asp.Net Core] 1. IIS中的 Asp.Net Core 和 dotnet watch

在基于传统的.NET Framework的Asp.Net Mvc的时候,本地开发环境中可以在IIS中建立一个站点,可以直接把站点的目录指向asp.net mvc...

2218
来自专栏云加新鲜事儿

智能云上手指南:如何使用万象优图服务的 Python SDK

本文将为广大云开发者介绍如何使用万象优图服务的 Python SDK。

3163
来自专栏Java技术栈

Spring import配置文件使用占位符

import使用占位符 连接池切换导入配置的代码: <import resource="classpath:META-INF/spring/spring-${d...

35113
来自专栏Java成神之路

Spring_总结_04_高级配置(一)之Profile

我们在开发软件时,通常会进行跨环境部署。而在跨环境部署时,经常会遇到某些环境的配置并不适用于另一环境,导致应用无法正常运行。

584
来自专栏ASP.NETCore

微服务日志之Spring Boot Kafka实现日志收集

承接上文( 微服务日志之.NET Core使用NLog通过Kafka实现日志收集 https://www.cnblogs.com/maxzhang1985/p/...

684
来自专栏晓晨的专栏

C#获取根目录的方法集合

1193
来自专栏玩转JavaEE

初识Spring Boot框架

按:最近公众号文章主要是整理一些老文章,主要是个人CSDN上的博客,也会穿插一些新的技术点。 ---- 前面的铺垫文章已经连着写了六篇了,主要是介绍了Sprin...

3495
来自专栏阿杜的世界

让你的Spring Boot工程支持HTTP和HTTPS

如今,企业级应用程序的常见场景是同时支持HTTP和HTTPS两种协议,这篇文章考虑如何让Spring Boot应用程序同时支持HTTP和HTTPS两种协议。

812

扫描关注云+社区