美文网首页微信小程序
微信小程序 防止重复点击

微信小程序 防止重复点击

作者: AAA_si | 来源:发表于2022-03-24 10:01 被阅读0次

    微信小程序 防止重复点击或请求 出现问题
    共计两种方法 个人推荐方法2

    方法1 全局设置方法 在需要的页面单独控制

    app.js
    globalData: {
        PageActive: true
    },
    // 防止重复点击事件
    preventActive (fn) {
      const self = this
      if (this.globalData.PageActive) {
          this.globalData.PageActive = false
          if (fn) fn()
          setTimeout(() => {
            self.globalData.PageActive = true
          }, 1500); //设置该时间内重复触发只执行第一次,单位ms,按实际设置
      } else {
          console.log('重复点击或触发')
      }
    }
    
    index.js
    // getApp()  是全局方法 
    getBtn:function(){
      getApp().preventActive(()=>{
          ajax('/pages/index', {
            data:{
              id:this.data.id
            },
          }, res => {
            if(res.code == 0){ 
              console.log(res,'1500秒后再次点击才生效')
            }
          })
      })
    }
    
    

    方法2

    1.执行请求时使用wx.showLoading

    util.js文件

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

    index.js文件(需要的js文件)

    function request() {
      util.showLoading('加载中...');
      ajax('/pages/index', {
        data:{
          id:this.data.id
        },
       }, res => {
            util.hideLoading()
            if(res.code == 0){ 
              console.log(res,'返回值')
            }
      })
    }
    

    2.页面跳转时,由于小程序的页面跳转并不是很快,可以选择用加载框,也可以限制按钮或控件的点击间隔的方式处理(更合适)

    util.js文件

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

    index.js

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


    直接wxml中判断,不需要在index.js中操作
    index.wxml

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

    相关文章

      网友评论

        本文标题:微信小程序 防止重复点击

        本文链接:https://www.haomeiwen.com/subject/xvncjrtx.html