页面使用了uni-app navigation-bar组件在onLoad生命周期里面调用uni.showLoading无效

页面使用了uni-app navigation-bar组件在onLoad生命周期里面调用uni.showLoading无效

开发环境 版本号 项目创建方式
Windows 10.0.26100 HBuilderX
Android Android 15
小米
Redmi K60 Ultra

示例代码：

<template>  
    <page-meta>  
        <navigation-bar></navigation-bar>  
    </page-meta>  
</template>  
<script setup>  
    onLoad(()=>{  
     uni.showLoading({  
        title: "加载中",  
        mask: true  
    });  
    })  
</script>

操作步骤：

  • 创建vue页面，使用示例代码就能复现

预期结果：

  • 正常显示loading动画

实际结果：

  • 不显示loading动画

bug描述：

页面使用了navigation-bar组件，在onLoad生命周期里面调用uni.showLoading，不显示loading动画


更多关于页面使用了uni-app navigation-bar组件在onLoad生命周期里面调用uni.showLoading无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

hx升级到最新版试试还有没有问题

更多关于页面使用了uni-app navigation-bar组件在onLoad生命周期里面调用uni.showLoading无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


更新到了最新版本4.84，也打了最新得基座，还是有这个问题

这是因为在 onLoad 生命周期中调用 uni.showLoading() 时，页面和 navigation-bar 组件可能尚未完成渲染，导致 loading 被遮挡或无法正常显示。

解决方案：

  1. 使用 nextTick 延迟执行
    在 onLoad 中通过 nextTick 确保 DOM 渲染完成后再显示 loading：

    import { nextTick } from 'vue'
onLoad(() => {
  nextTick(() => {
    uni.showLoading({
      title: "加载中",
      mask: true
    })
  })
})

  2. 改用 onReady 生命周期
    将 showLoading 调用移至 onReady，此时页面和组件已渲染完成：

    onReady(() => {
  uni.showLoading({
    title: "加载中",
    mask: true
  })
})
回到顶部