小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> uniapp怎么动态设置页面顶部的标题

uniapp怎么动态设置页面顶部的标题

一、核心 API 动态设置(推荐)

// 任意页面调用
uni.setNavigationBarTitle({
  title: '最新通知',
  success: () => console.log('标题更新成功'),
  fail: (err) => console.error('更新失败:', err)
})

特性

  • 实时生效,支持异步回调

  • 覆盖全局和页面的静态配置

  • 支持在onLoad/onShow等生命周期使用

  • 跨平台兼容性最佳(微信/支付宝/App/H5)

二、全局配置优先级体系

  1. 全局默认配置
    pages.json定义基础样式(优先级最低)

"globalStyle": {
  "navigationBarTitleText": "默认标题",
  "navigationBarTextStyle": "white"
}

2. 页面级静态配置
局部覆盖全局设置(中等优先级)

"pages": [
  {
    "path": "pages/news/index",
    "style": {
      "navigationBarTitleText": "新闻动态"
    }
  }
]

3. 动态 API 设置
运行时覆盖前两者(最高优先级)

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了