uni.showLoading并非导航栏专属动画，而是全局遮罩层；微信原生导航栏无独立加载API；需自定义导航栏才能实现标题区可控loading动画。
uni.showLoading 是唯一能触发“导航栏加载动画”的通用方式，但它不作用于导航栏本身，而是全局遮罩层。微信小程序原生导航栏没有独立的加载动画 API，所谓“导航栏加载动画”是开发者对视觉反馈的误读。
uni.showLoading 为什么常被当成导航栏动画
- 微信小程序中，
uni.showLoading弹出时会自动暂停页面滚动、覆盖整个视口（包括导航栏区域），配合半透明蒙层和旋转图标，形成“全屏加载中”的观感； - 用户看到标题区域变暗+图标旋转，误以为是导航栏在动；
- 实际上：导航栏文字/颜色未变化，也无任何原生加载指示器。
常见错误现象：
- 调用
uni.setNavigationBarColor配了animation参数，但没看到过渡效果 → 因为微信小程序不支持 navigationBar 的动画参数，该参数仅在 App 端生效； - 在
onLoad里立即调用uni.showLoading，结果一闪而过 → 小程序生命周期执行快，loading 还没渲染完就hideLoading了； - 期望导航栏右侧出现 loading 指示器（如 iOS 原生样式）→ 微信小程序不提供该能力，必须自定义右上角胶囊区域（极复杂，且受限于微信限制）。
使用场景建议：
- 数据请求发起后、等待接口返回前，用
uni.showLoading给用户明确等待信号； - 不要依赖它做“导航栏专属动效”，它只是全局反馈；
- 若需更精细控制（如仅在标题旁加 loading 图标），必须关闭原生导航栏（
navigationStyle: "custom"），自行用view实现带动画的标题区。
关闭原生导航栏后实现真·导航栏加载状态
只有走自定义导航栏路线，才能在标题区域添加可控的 loading 动画：
Wechat MP Article Stats Comments Suite - 微信公众号管理套件
下载
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
- 在
pages.json对应页面配置："navigationStyle": "custom"； - 页面内用
<view class="nav-bar"><text>{{title}}</text><image v-if="loading" src="/static/loading.gif" class="loading-icon"/></view>； - 通过
v-show或:class控制 loading 图标显隐； - 注意：微信小程序右上角胶囊按钮无法隐藏，需预留位置，避免遮挡。
性能与兼容性影响：
- 自定义导航栏会增加首屏渲染时间，尤其 H5 端需额外 CSS 定位；
- App 端失去原生导航栏的沉浸式体验和下拉刷新集成；
- 微信小程序中，
statusBar高度需手动计算（uni.getSystemInfoSync().statusBarHeight），否则内容顶到状态栏下。
容易踩的坑：别在微信小程序里试这些
-
uni.setNavigationBarColor的animation字段 → 微信小程序完全忽略，只在 App 端生效； -
uni.showNavigationBarLoading→ 这个 API 根本不存在，是开发者混淆了旧版微信原生开发或其它框架的命名； - 在
onShow中反复调用uni.showLoading→ 可能触发“重复调用”警告，且用户切页再返回时 loading 状态错乱； - 用 CSS 动画强行给原生导航栏加伪元素 → 原生导航栏 DOM 不可访问，所有样式注入无效。
真正起作用的只有三件事：开 uni.showLoading、关 uni.hideLoading、必要时换 custom 导航栏自己画。
微信小程序的导航栏加载反馈，本质是「遮罩层 + 心理预期」，不是像素级动画控制。别跟原生能力较劲，优先保障用户感知清晰、关闭及时。
