小程序专栏

小程序中设置禁止多次点击或者重复点击

读心悦 · 7月1日 · 2020年 本文960字 · 阅读3分钟164

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

<code>/**
 * 执行请求,禁止多次点击或者重复点击
 */
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();
    }
}
</code>

在页面js:

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

wxml:

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

在页面跳转,禁止多次或者重复点击:

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

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

js:

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

</code>

wxml:

<code><view bindtap="{{!isClicked?'click':''}}"></view></code>
0 条回应

×