uni.setNavigationBarTitle 标题动态化_uni-app navigationbartitletext 动态展示

目录

类型一： 

类型二： 

直接上代码：

类型一： 

<template>
    <view @click="changTitle">
        题目详情页面
    </view>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  onLoad: function (options) {/页面一打开，就显示设置的标题
    uni.setNavigationBarTitle({
      title: '标题1'
    })
  },
  methods: {
    changTitle(e){/点击事件，显示标题
      uni.setNavigationBarTitle({
        title:'标题2'
      })
    }
  }
}
</script>
 
<style>
</style>

类型二： 

官网：

• 如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间

        打印页面生命周期发现onLoad先于onReady执行，所以即使数据是上一个页面传递过来的，也不会影响标题的展示。

//第一步，我们可以在data中定义一个变量headerTitle
data(){
	return {
		headerTitle:"",//导航栏的标题
	}
}
 
//第二步，在onLoad页面周期中去获取上一个页面传递的参数，然后对headerTitle进行赋值，方便我们接下来的使用
onLoad(props) {
	console.log(props,"onLoad");//获取上一个页面传递的数据
	if (props?.title) {
        const titleType = props.title;
        let barTitle = "预约会议";
        switch (titleType) {
          case "order":
            barTitle = '预约会议';
            break;
          case "create":
            barTitle = '创建会议';
            break;
          case "edit":
            barTitle = '编辑会议';
            break;
          default:
            break;
        }
       this.headerTitle=barTitle
   	}
}
//最后，需要在onReady中进行设置标题，⚠️onReady中没有接收的参数
onReady(){
	 uni.setNavigationBarTitle({
        title: this.headerTitle
     });
}
 
//上一个页面传递的参数
const type = 'create';//传递给下一个页面的参数
uni.navigateTo({
   url: `/pages/bookAMeeting/index?title=${type}`
})