uni-app 路由跳转之前开启loading，跳转后没有将this.isLoading置为false但loading框自动关闭了

uni-app 路由跳转之前开启loading，跳转后没有将this.isLoading置为false但loading框自动关闭了

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

操作步骤：

  • 从任务列表页面点击任一任务，跳转至设备列表页

预期结果：

  • 从任务列表页点击任务，到跳转设备列表数据加载完毕，这一整个过程都需要展示loading框

实际结果：

  • loading框仅出现1-2秒后自动关闭，此时设备列表页面数据尚未加载完，页面显示【数据为空】

bug描述：

路由之前代码：

toDetail (checkTask) {  
  console.log("toDetail", checkTask);  
  this.isLoading = true;  
  uni.navigateTo({ url: '/pages/work/inspection/equipList?taskId=' + checkTask.taskId + '&taskType=' + checkTask.taskType + '&taskStatus=' + checkTask.taskStatus + '&taskName=' + checkTask.taskName })      
},

目标页面代码：

onLoad (params) {  
  this.taskId = params.taskId  
  this.taskType = params.taskType  
  this.taskStatus = params.taskStatus  
  this.title = params.taskName  

  // this.loadData();  
  var barcodeModel = uni.requireNativePlugin("iData-BarcodePlugin-BarcodeModule");  
  //接口initScan(UniJSCallback callback)  
  barcodeModel.initScan((ret) => {  
      uni.showToast({  
          message: ret,  
          duration: 1.5  
      });  
  });  
  /* //获取扫码结果  
  var globalEvent = uni.requireNativePlugin('globalEvent');  
  globalEvent.addEventListener('iDataBarcodeEvent', (e) => {  
      let equipNo = e.barcode.substring(0, e.barcode.indexOf("|"));  
      this.checkScanCode(equipNo);  
  }); */  
},  
onShow() {  

  this.loadData();  
  // 页面显示时添加扫码事件监听  
  this.addBarcodeEventListener();  
},  

// 加载设备列表  
loadData () {  
  const app = this;  
  let params = {  
            'scTaskId': app.taskId,  
            'pageSize': 1000,  
          }  
  InspectionApi.listTaskMemu(params).then(response => {  
  app.equipList = response.rows.sort((item1, item2) => item1.checked > item2.checked ? 1 : -1);  
  app.list = app.equipList;  
  var finishList = app.equipList.filter(item => {return item.checked !== '0'});  
  app.enableCommit = finishList.length === app.equipList.length;  
  });  
},

更多关于uni-app 路由跳转之前开启loading，跳转后没有将this.isLoading置为false但loading框自动关闭了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

值得一提的是，用内置浏览器运行时是OK的。只有在真机运行会出现这个问题，而且100%必现。

更多关于uni-app 路由跳转之前开启loading，跳转后没有将this.isLoading置为false但loading框自动关闭了的实战教程也可以访问 https://www.itying.com/category-93-b0.html


意思是在 app 上，跳转页面自动关闭了 loading，但是 web 上没有。你可以先尝试在目标页面打开 loading

回复 DCloud_UNI_LXH: 试过了，效果是一样的

回复 海公牛: 你的意思是你在跳转页面后，请求前去 loading，也会在 loading 2s 自动关闭？

回复 DCloud_UNI_LXH: 是的，在this.loadData(); 之前再次打开loading没有反应，和没加的效果一样，也是跳转页面立马就关闭loading

回复 DCloud_UNI_LXH: 大佬要是有空的话加我qq，帮忙远程调试一下看看吧

回复 海公牛: 603308791

回复 海公牛: 简化你的逻辑，麻烦新建一个模板复现一下你的问题，然后把模板上传上来

回复 DCloud_UNI_LXH: 新建模板，是需要我把关键代码上传上来的意思吗？

回复 海公牛: 把新建的那个 demo 项目上传上来，用最简单的代码来复现你的 Bug

在 uni-app 中进行路由跳转时，如果你在跳转之前开启了 loading 框，但在跳转之后没有手动将 this.isLoading 置为 false，但 loading 框仍然自动关闭了，可能是由于以下原因：

1. 页面跳转导致的页面生命周期变化

  • 在 uni-app 中，页面跳转会触发页面的生命周期函数。例如，onHide 或 onUnload 会在页面跳转时触发。
  • 如果 loading 框是基于页面生命周期的某些条件（如 this.isLoading）来显示的，页面跳转后，页面的生命周期变化可能导致 loading 框自动关闭。

2. 异步操作的完成

  • 如果你在跳转前开启了 loading 框，并且跳转后的操作是异步的（如网络请求），但你没有在异步操作完成后将 this.isLoading 置为 false，可能会导致 loading 框在某些情况下自动关闭。例如，某些 UI 库可能会在异步操作完成后自动关闭 loading 框。

3. uni-app 的路由机制

  • uni-app 的路由跳转是同步的，跳转后当前页面的生命周期会立即触发，这可能导致 loading 框自动关闭。

解决方法：

确保在跳转后手动关闭 loading 框，或者在页面生命周期函数中处理 this.isLoading 的状态。

示例代码：

methods: {
  navigateToPage() {
    // 开启 loading
    this.isLoading = true;
    uni.showLoading({
      title: '加载中...',
      mask: true
    });

    // 模拟异步操作
    setTimeout(() => {
      // 跳转页面
      uni.navigateTo({
        url: '/pages/targetPage/targetPage',
        success: () => {
          // 跳转成功后关闭 loading
          this.isLoading = false;
          uni.hideLoading();
        },
        fail: () => {
          // 跳转失败时关闭 loading
          this.isLoading = false;
          uni.hideLoading();
        }
      });
    }, 1000);
  }
}

在页面生命周期中处理：

onHide() {
  // 页面隐藏时关闭 loading
  this.isLoading = false;
  uni.hideLoading();
},

onUnload() {
  // 页面卸载时关闭 loading
  this.isLoading = false;
  uni.hideLoading();
}
回到顶部