微信小程序如何杜绝重复点击该组件推荐

摘要： 小程序在渲染或者在操作请求时，如果响应很慢，会导致用户多次点击或者重复点击。另外也可能有用户多次连续点击请求，造成不是我们想要的结果。因此，需要设置禁止用户多次重复点击。在执行请求...

小程序在渲染或者在操作请求时，如果响应很慢，会导致用户多次点击或者重复点击。另外也可能有用户多次连续点击请求，造成不是我们想要的结果。因此，需要设置禁止用户多次重复点击。在执行请求时，禁止多次点击或者重复点击,放在工具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();
    }
}1234567891011121314151617181920212223242526272829

在页面js：

submit:function(){
    util.showLoading("数据请求中...");
    wx.request({
        url:url,
        data:data,
        success:(res)=>{
            util.hideLoading();
        },
        fail:()=>{
            util.hideLoading();
        }
    })
}12345678910111213

wxml:

<view  bindtap="submit"></view>1

在页面跳转，禁止多次或者重复点击：

/**
 * 
 */
function isClicked(self) {
    self.setData({
        isClicked: true
    })
   
    setTimeout(function () {
        self.setData({
            isClicked: false
        })
    }, 500)
}1234567891011121314

在对应页面中设置isClicked数据对象，

js:

Page({
    data:{
        isClicked:false
    },
    click:function(){
        util.isClicked(this);
    }
})123456789

wxml:

<view bindtap="{{!isClicked?'click':''}}"></view>