当你在 uni-app 中使用 showLoading 进行加载状态的实现,然后数据返回后进行其他文字提示。你可能会遇到以下问题:

  • 在微信开发者工具中是完美的,但是到实际手机上运行(预览版/正式发布)会出现 loading 加载完成后,后面的提示问题一闪而过。

导致这个问题的原因是,在小程序底层 showLoading 和 showToast 其实都是 showToast 来实现的。在实机运行时,运行的顺序是 showLoading -> showToast -> hideLoading。而我们想要的效果是showLoading -> hideLoading -> showToast

如何解决这个问题呢?在 uniapp 中,我们可以使用 showToast 来实现 loading 的效果

1
2
3
4
5
uni.showToast({
icon: "loading",
duration: 300000,
mask: true,
})

这里的 icon 为 loading 是,就和 showLoading 现实的状态是一致的。这里的延时duration我们尽可能的设置长一些,尽量达到接口超时时间,这样,就不必担心数据还未返回,loading 状态就消失不见了。下面是一个简单的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async function getUserList() {
try {
uni.showToast({
icon: "loading",
duration: 300000,
mask: true,
})
const { code, data, message } = await getUserListApi()
uni.hideToast()

uni.showToast({
icon: "none",
title: message,
})
} catch (error) {
hideToast()
} finally {
}
}