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

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

在页面js:

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

wxml:

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

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

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

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

js:

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

wxml:

<view bindtap="{{!isClicked?'click':''}}"></view>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

读心悦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值