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

小程序在渲染或者在操作请求时,如果响应很慢,会导致用户多次点击或者重复点击。另外也可能有用户多次连续点击请求,造成不是我们想要的结果。因此,需要设置禁止用户多次重复点击。在执行请求时,禁止多次点击或者重复点击,放在工具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>
发布了102 篇原创文章 · 获赞 26 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/xuelian3015/article/details/95056419
今日推荐