set-navigation-bar-title.uvue

<template>
  <view>
    <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>
    </view>
  </view>
</template>

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

export default {
  data(){
    return {
      newTitle: 'new title',
      longTitle: 'long title long title long title long title long title long title long title long title long title long title'
    }
  },
  methods: {
    setNavigationBarNewTitle() {
      uni.setNavigationBarTitle({
        title: this.newTitle,
        success() {
          console.log('setNavigationBarTitle success')
          this.setLifeCycleNum(state.lifeCycleNum + 1)
        },
        fail() {
          console.log('setNavigationBarTitle fail')
          this.setLifeCycleNum(state.lifeCycleNum - 1)
        },
        complete() {
          console.log('setNavigationBarTitle complete')
          this.setLifeCycleNum(state.lifeCycleNum + 1)
        }
      })
    },
    setNavigationBarLongTitle() {
      uni.setNavigationBarTitle({
        title: this.longTitle,
        success() {
          console.log('setNavigationBarTitle success')
        },
        fail() {
          console.log('setNavigationBarTitle fail')
        },
        complete() {
          console.log('setNavigationBarTitle complete')
        }
      })
    },
    // 自动化测试
    getLifeCycleNum(): number {
      return state.lifeCycleNum
    },
    // 自动化测试
    setLifeCycleNum(num: number) {
      setLifeCycleNum(num)
    }
  },
}
</script>