uniapp+动态设置顶部导航栏使用详解

bug总结2026-01-15 15:13

在 uni-app 中，页面标题（导航栏中间显示的文字）既可以在编译期通过 pages.json 中的 navigationBarTitleText 指定，也可以在运行时通过 API 动态修改。运行时修改常用于：根据路由参数动态显示标题、异步获取数据后生成标题、国际化（i18n）场景、或者同一页面在不同情境下要显示不同标题时使用。

运行时修改的标准方法是：uni.setNavigationBarTitle(OBJECT)。

javascript 复制代码

uni.setNavigationBarTitle({
  title: '页面标题',        // 必填：string
  success?: () => void,    // 可选：成功回调
  fail?: (err) => void,    // 可选：失败回调
  complete?: () => void    // 可选：完成回调
})

title：目标标题字符串（各平台可能会在显示长度上做截断或调整）。

回调参数：与其它 uni 接口一致，支持 success/fail/complete 三个回调。

返回值：此 API 是通过回调通知结果；可自行封装为 Promise 以便在 async/await 逻辑中使用。
之前是使用自定义导航栏，发现这个api挺好用的