uniapp dynamically updates the title of the head navigation

In uni-app, you can use the `uni.setNavigationBarTitle` method to dynamically update the title of the header navigation. Here is an example:

<template>
  <view>
    <!-- ... 内容区域 ... -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '初始标题'
    };
  },
  methods: {
    updateTitle() {
      uni.setNavigationBarTitle({
        title: this.title
      });
    }
  },
  mounted() {
    this.updateTitle(); // 页面加载时更新标题
  }
};
</script>

In the above example, we call the `updateTitle` method in the `mounted` hook function to update the title of the header navigation. You can save the title that needs to be updated in the `data` attribute, then call the `uni.setNavigationBarTitle` method and pass in the new title.

It should be noted that the `uni.setNavigationBarTitle` method may behave differently on different platforms. On some platforms, it may be necessary to update the title in the page's `onShow` hook function to ensure it displays correctly when the page switches. Please choose the appropriate hook function to update the title according to the actual situation.

In addition, if you want to change other styles of the navigation bar, such as background color, text color, etc., you can use the `uni.setNavigationBarColor` method to achieve this. For specific usage, please refer to the uni-app official documentation.

Guess you like

Origin blog.csdn.net/qq_68299987/article/details/135178202