uni-app 交互API大坑
前言:说好的 uni.showLoading(),只能使用 uni.hideLoading() API关闭呢?
场景描述:
在向服务器发送请求前,我们习惯加上 加载中
的提示框,在请求完成或请求成功后延时2s关闭 加载中
的提示框,并使用 uni.showToast() API 提示一下请求的 message。
代码描述:
uni.showLoading({
title:"加载中..."
})
uni.request({
method:"POST",
url:this.baseURL + '/tx/sendCode',
data:{
phone:'13397785108'
},
success: (res) => {
console.log(res)
// 服务端响应的 message 提示
uni.showToast({
title: "获取成功",
icon: "none",
position: 'bottom'
})
// 延时关闭 加载中的 loading框
setTimeout(()=>{
uni.hideLoading()
},2000)
}
})
问题描述:
一切看起来都是那么的平静且舒适,但是怎么也达不到预期的效果(延时2s关闭加载中的loading框),而是请求一完成或成功就立马关闭,导致加载框一闪而过,严重影响用户体验!,我甚至一度怀疑 是不是setTimeout 出问题了。然后尝试把 uni.hideLoading() 这句代码去了,还是 加载中的loading框 被立即关闭,卧槽,啥情况??? 我蒙13了…
终于在重写了个测试页面之后,发现了罪魁祸首,它就是:uni.showToast() ,他竟然有关闭加载框的功能,what???可把我坑惨了…
解决办法:
将服务端提示代码一并放到 定时器中去,方能实现 【场景描述】的舒适操作。
uni.showLoading({
title:"加载中..."
})
uni.request({
method:"POST",
url:this.baseURL + '/tx/sendCode',
data:{
phone:'13397785108'
},
success: (res) => {
console.log(res)
setTimeout(()=>{
// 服务端响应的 message 提示
uni.showToast({
title: "获取成功",
icon: "none",
position: 'bottom'
})
//延时关闭 加载中的 loading框
uni.hideLoading()
},2000)
}
})