袁来如此的工作笔记
袁来如此的工作笔记
竹杖芒鞋轻胜马，谁怕？ 一蓑烟雨任平生。

uni-app说好的 uni.showLoading(),只能使用 uni.hideLoading() 关闭呢？

浏览量:198

场景描述：

在向服务器发送请求前，我们习惯加上 加载中 的提示框，在请求完成或请求成功后延时2s关闭 加载中 的提示框，并使用 uni.showToast() API 提示一下请求的 message。

代码描述：

uni.showLoading({
    title:"加载中..."
})
uni.request({
    method:"POST",
    url:this.baseURL + '/tx/sendCode',
    data:{
        phone:'13911111111'
    },
    success: (res) => {
        console.log(res)
        // 服务端响应的 message 提示
        uni.showToast({
                title: "获取成功",
                icon: "none",
                position: 'bottom'
            })
        // 延时关闭 加载中的 loading框
        setTimeout(()=>{
            uni.hideLoading()
        },2000)
    }
})

问题描述：

一切看起来都是那么的平静且舒适，但是怎么也达不到预期的效果（延时2s关闭加载中的loading框），而是请求一完成或成功就立马关闭，导致加载框一闪而过，严重影响用户体验！，我甚至一度怀疑 是不是setTimeout 出问题了。然后尝试把 uni.hideLoading() 这句代码去了，还是 加载中的loading框 被立即关闭…

终于在重写了个测试页面之后，发现了罪魁祸首，它就是：uni.showToast() ,他竟然有关闭加载框的功能，what？？？…

解决办法：

将服务端提示代码一并放到 定时器中去，方能实现 【场景描述】的舒适操作。

uni.showLoading({
    title:"加载中..."
})
uni.request({
    method:"POST",
    url:this.baseURL + '/tx/sendCode',
    data:{
        phone:'13911111111'
    },
    success: (res) => {
        console.log(res)
        setTimeout(()=>{
            // 服务端响应的 message 提示
            uni.showToast({
                title: "获取成功",
                icon: "none",
                position: 'bottom'
            })
            //延时关闭  加载中的 loading框
            uni.hideLoading()
        },2000)
    }
})
打赏

uni-app