uni.setNavigationBarTitle(options)

动态设置当前页面的标题

setNavigationBarTitle 兼容性

Web	微信小程序	Android	iOS	HarmonyOS	HarmonyOS(Vapor)
4.0	4.41	3.97	4.11	4.61	5.0

参数

名称	类型	必填	默认值	兼容性	描述
options	SetNavigationBarTitleOptions	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -
名称 类型 必备 默认值 兼容性 描述 title string 是 - Web 微信小程序 Android iOS HarmonyOS HarmonyOS(Vapor) 4.0 4.41 3.97 4.11 4.61 5.0 页面标题 success (result: SetNavigationBarTitleSuccess) => void 否 - Web 微信小程序 Android iOS HarmonyOS HarmonyOS(Vapor) 4.0 4.41 3.97 4.11 4.61 5.0 接口调用成功的回调函数 fail (error: SetNavigationBarTitleFail) => void 否 - Web 微信小程序 Android iOS HarmonyOS HarmonyOS(Vapor) 4.0 4.41 3.97 4.11 4.61 5.0 接口调用失败的回调函数 complete (res: SetNavigationBarTitleComplete) => void 否 - Web 微信小程序 Android iOS HarmonyOS HarmonyOS(Vapor) 4.0 4.41 3.97 4.11 4.61 5.0 接口调用结束的回调函数（调用成功、失败都会执行）

SetNavigationBarTitleSuccess 的属性值

名称	类型	必备	默认值	兼容性	描述
errMsg	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -

SetNavigationBarTitleFail 的属性值

名称	类型	必备	默认值	兼容性	描述
errCode	number	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	设置导航栏标题错误码 - 4: 框架内部异常
errSubject	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	统一错误主题（模块）名称
data	any	否	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	错误信息中包含的数据
cause	Error	否	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -	源错误信息，可以包含多个错误，详见SourceError
errMsg	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -

SetNavigationBarTitleComplete 的属性值

名称	类型	必备	默认值	兼容性	描述
errMsg	string	是	-	- Web 微信小程序 Android iOS HarmonyOS - - - - -

返回值

类型	必备
Promise<SetNavigationBarTitleSuccess>	否
名称 类型 必备 默认值 兼容性 描述 errMsg string 是 - - Web 微信小程序 Android iOS HarmonyOS - - - - -

参见

• 相关 Bug
• 参见uni-app相关文档
• 微信小程序文档
• 支付宝小程序文档
• 百度小程序文档
• 抖音小程序文档
• 飞书小程序文档
• 钉钉小程序文档
• QQ小程序文档
• 快手小程序文档
• 京东小程序文档
• 华为快应用文档
• 360小程序文档

示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

扫码体验（手机浏览器跳转到App直达页）

扫码体验

示例

<template>
  <page-head title="setNavigationBarTitle"></page-head>
  <view class="uni-padding-wrap uni-common-mt">
    <button @tap="setNavigationBarNewTitle" class="uni-btn">
      设置当前页面标题为: {{ newTitle }}
    </button>
    <button @tap="setNavigationBarLongTitle" class="uni-btn">
      设置超长标题
    </button>
    <!-- #ifndef VUE3-VAPOR -->
    <!-- #ifdef APP-HARMONY -->
    <button @tap="showNavigationBarLoading" class="uni-btn">
      设置标题 loading
    </button>
    <button @tap="hideNavigationBarLoading" class="uni-btn">
      隐藏标题 loading
    </button>
    <!-- #endif -->
    <!-- #endif -->
  </view>
</template>

<script setup lang="uts">
  import { state, setLifeCycleNum } from '@/store/index.uts'

  const newTitle = ref('new title')
  const longTitle = ref('long title long title long title long title long title long title long title long title long title long title')

  // 自动化测试
  const getLifeCycleNum = () : number => {
    return state.lifeCycleNum
  }

  // 自动化测试
  const setLifeCycleNumFunc = (num : number) => {
    setLifeCycleNum(num)
  }

  // #ifdef APP-HARMONY
  const showNavigationBarLoading = () => {
    uni.showNavigationBarLoading({
      success: () => {
        console.log('showNavigationBarLoading success')
      },
      fail: () => {
        console.log('showNavigationBarLoading fail')
      },
      complete: () => {
        console.log('showNavigationBarLoading complete')
      }
    })
  }

  const hideNavigationBarLoading = () => {
    uni.hideNavigationBarLoading({
      success: () => {
        console.log('hideNavigationBarLoading success')
      },
      fail: () => {
        console.log('hideNavigationBarLoading fail')
      },
      complete: () => {
        console.log('hideNavigationBarLoading complete')
      }
    })
  }
  // #endif

  const setNavigationBarNewTitle = () => {
    uni.setNavigationBarTitle({
      title: newTitle.value,
      success: () => {
        console.log('setNavigationBarTitle success')
        setLifeCycleNumFunc(state.lifeCycleNum + 1)
      },
      fail: () => {
        console.log('setNavigationBarTitle fail')
        setLifeCycleNumFunc(state.lifeCycleNum - 1)
      },
      complete: () => {
        console.log('setNavigationBarTitle complete')
        setLifeCycleNumFunc(state.lifeCycleNum + 1)
      }
    })
  }

  const setNavigationBarLongTitle = () => {
    uni.setNavigationBarTitle({
      title: longTitle.value,
      success() {
        console.log('setNavigationBarTitle success')
      },
      fail() {
        console.log('setNavigationBarTitle fail')
      },
      complete() {
        console.log('setNavigationBarTitle complete')
      }
    })
  }

  defineExpose({
    getLifeCycleNum,
    setLifeCycleNum: setLifeCycleNumFunc,
    setNavigationBarNewTitle,
    setNavigationBarLongTitle
  })
</script>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <page-head title="setNavigationBarTitle"></page-head>
  <view class="uni-padding-wrap uni-common-mt">
    <button @tap="setNavigationBarNewTitle" class="uni-btn">
      设置当前页面标题为: {{ newTitle }}
    </button>
    <button @tap="setNavigationBarLongTitle" class="uni-btn">
      设置超长标题
    </button>
    <!-- #ifndef VUE3-VAPOR -->
    <!-- #ifdef APP-HARMONY -->
    <button @tap="showNavigationBarLoading" class="uni-btn">
      设置标题 loading
    </button>
    <button @tap="hideNavigationBarLoading" class="uni-btn">
      隐藏标题 loading
    </button>
    <!-- #endif -->
    <!-- #endif -->
  </view>
</template>

<script setup lang="uts">
  import { state, setLifeCycleNum } from '@/store/index.uts'

  const newTitle = ref('new title')
  const longTitle = ref('long title long title long title long title long title long title long title long title long title long title')

  // 自动化测试
  const getLifeCycleNum = () : number => {
    return state.lifeCycleNum
  }

  // 自动化测试
  const setLifeCycleNumFunc = (num : number) => {
    setLifeCycleNum(num)
  }

  // #ifdef APP-HARMONY
  const showNavigationBarLoading = () => {
    uni.showNavigationBarLoading({
      success: () => {
        console.log('showNavigationBarLoading success')
      },
      fail: () => {
        console.log('showNavigationBarLoading fail')
      },
      complete: () => {
        console.log('showNavigationBarLoading complete')
      }
    })
  }

  const hideNavigationBarLoading = () => {
    uni.hideNavigationBarLoading({
      success: () => {
        console.log('hideNavigationBarLoading success')
      },
      fail: () => {
        console.log('hideNavigationBarLoading fail')
      },
      complete: () => {
        console.log('hideNavigationBarLoading complete')
      }
    })
  }
  // #endif

  const setNavigationBarNewTitle = () => {
    uni.setNavigationBarTitle({
      title: newTitle.value,
      success: () => {
        console.log('setNavigationBarTitle success')
        setLifeCycleNumFunc(state.lifeCycleNum + 1)
      },
      fail: () => {
        console.log('setNavigationBarTitle fail')
        setLifeCycleNumFunc(state.lifeCycleNum - 1)
      },
      complete: () => {
        console.log('setNavigationBarTitle complete')
        setLifeCycleNumFunc(state.lifeCycleNum + 1)
      }
    })
  }

  const setNavigationBarLongTitle = () => {
    uni.setNavigationBarTitle({
      title: longTitle.value,
      success() {
        console.log('setNavigationBarTitle success')
      },
      fail() {
        console.log('setNavigationBarTitle fail')
      },
      complete() {
        console.log('setNavigationBarTitle complete')
      }
    })
  }

  defineExpose({
    getLifeCycleNum,
    setLifeCycleNum: setLifeCycleNumFunc,
    setNavigationBarNewTitle,
    setNavigationBarLongTitle
  })
</script>

通用类型

GeneralCallbackResult

名称	类型	必备	默认值	兼容性	描述
errMsg	string	是	-	Web 微信小程序 Android iOS HarmonyOS - 4.41 - - -	错误信息