uniapp设置title

设置页面标题的方法

在UniApp中设置页面标题可以通过以下几种方式实现，适用于不同场景和需求。

通过pages.json配置 在pages.json文件中，可以为每个页面单独配置导航栏标题。找到对应页面的配置项，添加navigationBarTitleText属性：

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页标题"
  }
}

动态修改标题 需要运行时改变标题时，可使用uni.setNavigationBarTitleAPI：

uni.setNavigationBarTitle({
  title: '新标题'
})

条件标题设置 结合Vue的响应式特性，可以根据状态动态更新标题：

export default {
  data() {
    return {
      dynamicTitle: '默认标题'
    }
  },
  onLoad() {
    this.dynamicTitle = '加载后标题'
    uni.setNavigationBarTitle({ title: this.dynamicTitle })
  }
}

全局标题设置 在pages.json的globalStyle中配置默认标题样式：

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

注意事项

• H5端可能需要额外处理浏览器标签页标题
• 部分小程序平台有字数限制
• 动态修改标题可能需要在页面生命周期合适时机调用