uni-app showLoading 在app中会在页面载入前先被触发

uni-app showLoading 在app中会在页面载入前先被触发

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
操作系统版本 win7
HBuilderX类型 正式
HBuilderX版本 3.1.3
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • onLoad中加一个showLoading，然后延迟100ms关闭。
  • 跳转到此页面时，会在跳转前就触发了showLoading。

预期结果：

  • 跳转到新的页面时才会触发showLoading

实际结果：

  • 在跳转前就触发了showLoading

bug描述：

如题，一般页面初始化的请求都是放在onLoad中，在请求前会加一个showLoading， 但是在APP上如果跳转到新的页面时，新的页面的初始化请求如果快的话，showLoading会在跳转前就一闪而过，然后才载入新的页面。 用户体验很不好。这个算bug吗？ 如果不是的话，请问如何解决会比较好呢？


更多关于uni-app showLoading 在app中会在页面载入前先被触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

不用showloading ,在页面中 放一个loading image ,请求完数据在隐藏image

更多关于uni-app showLoading 在app中会在页面载入前先被触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是uni-app在App端的正常表现，因为App端的页面跳转是原生动画，而showLoading是原生组件，两者属于不同线程。

解决方案：

  1. 使用setTimeout延迟showLoading：
onLoad() {
  setTimeout(() => {
    uni.showLoading();
    // 后续请求代码
  }, 300);
}
  1. 在onShow生命周期中触发showLoading：
onShow() {
  if(!this.hasShownLoading) {
    uni.showLoading();
    this.hasShownLoading = true;
    // 后续请求代码
  }
}
  1. 使用页面动画完成事件：
onReady() {
  uni.showLoading();
  // 后续请求代码
}
回到顶部