微信小程序防止重复点击按钮的示例代码

 更新时间:2023年10月25日 11:29:12   作者:西门夜说  
这篇文章主要介绍了微信小程序防止重复点击按钮的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

微信小程序防止重复点击按钮

Page({
  data: {
    ......
    isclick: false, //点击防重标志
  },
  /**
   * 需要做防点击防重的单击事件
   */
  onclick: function() {
    var self = this
    if(!self.data.isclick){
      self.setData({
        isclick:true
      })
      setTimeout(function () {
        self.setData({
          isclick: false
        })
      }, 1000);
    }else{
      return;
    }
    ......
  }
   ......
})
//btn_click.js
//点击防重
let isClick=false;
let preventDuplicateClicks=function(){
  if (!isClick) {
    isClick=true    
    setTimeout(function () {
      isClick = false
    }, 1000);
    return false;
  } else {
    return true;
  }
}
module.exports = {
  preventDuplicateClicks: preventDuplicateClicks
}
import btnClick from '../../../../utils/btn_click';
Page({
  ......
  /**
   * 1.需要防重的单击事件
   */
  orderPay: function() {
  onSubmitConfirm(event) {
    let that = this
    if (btnClick.preventDuplicateClicks()) {
      return
    }
    wx.request({
      url: xxxxxxx, //仅为示例,并非真实的接口地址
      method: "POST",
      data: {
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        let data = res.data
        console.log(res)
        wx.showToast({
          title: data.message,
          icon: 'success',
          duration: 2000,
        })
      },
      fail(res) {
        let data = res.data
        wx.showToast({
          title: data.message,
          icon: 'none',
          duration: 2000
        })
      },
      // 不论失败与否都会执行下面这个函数
      complete: () => {
        that.onSubmitCancel()
      }
    })
  },
})

到此这篇关于微信小程序防止重复点击按钮的文章就介绍到这了,更多相关小程序防止重复点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

最新评论