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

当用户点击按钮或控件时,如果响应比较慢,往往会重复点击,另外也会存在用户故意反复快速点击的情况,这种时候就会多次触发点击事件造成非期望的结果。如何解决或避免这个问题呢?一般来说有两种情况。 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 条评论
登录 后参与评论

相关文章

来自专栏移动开发之家

从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄...

935
来自专栏ccylovehs

JavaScript跨域解决方式

平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种:

651
来自专栏逸鹏说道

jQuery选择器大全(48个代码片段+21幅图演示)2

4. 属性过滤选择器 ——4.1 [attribute](取拥有attribute属性的元素) 下面的代码,最后一个a标签没有title属性,所以它仍然会带下划...

2758
来自专栏青玉伏案

Target-Action回调模式

        前面的博客中提到过回调的概念,是在OC通过协议来实现的回调,和Java中的接口的回调极为相似,下面来介绍另一种方法回调模式: Target-Ac...

1729
来自专栏娱乐心理测试

小程序如何避免多次点击,重复触发事件

作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,...

3415
来自专栏守候书阁

canvas入门实战--邀请卡生成与下载

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是j...

783
来自专栏欧阳大哥的轮子

MyLayout和XIB或SB的混合使用方法

MyLayout是一个可以非常简单和方便的实现各种界面布局的第三方开源库。在我的github项目中大部分DEMO都是通过代码来实现界面布局的,但这并不是表示My...

634
来自专栏移动开发之家

从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄...

311
来自专栏代码世界

前端之HTML内容

一、HTML介绍 1、Web服务本质   当我们在浏览器中输入一个url后打开一个页面这个过程实质是一个网络编程中的sockt服务端接受指令并发送指令的一个过程...

2699
来自专栏前端说吧

JS-DOM2级事件对象跨浏览器处理(已封装)

3318

扫码关注云+社区