uniapp 原生导航栏动态修改标题 添加右侧文字按钮

有时候登录和注册页面样式差不多相同的, 这时我们就可以使用一个页面写登录和注册功能,如果想实现动态导航栏就可以使用uni.setNavigationBarTitle来动态修改导航栏的文字

代码示例

<template>
  <view class="content">
		<button @click="router(1)">登录</button>
		<button @click="router(2)">注册</button>
  </view>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      
    };
  },
  methods: {
    
    
	router(e) {
    
    
		uni.navigateTo({
    
    
			url: '../index/index?id=' + e
		})
	}
  },
};
</script>
<template>
  <view class="box"> 111 </view>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  onLoad(e) {
    
    
    console.log(e);
    // 动态设置导航栏文字
    uni.setNavigationBarTitle({
    
    
      title: e.id === "1" ? "登录" : "注册",
    });
  },
};
</script>

导航栏右侧添加文字 点击事件

{
    
    
      "path": "pages/username/username",
      "style": {
    
    
        "navigationBarTitleText": "修改昵称",
        "app-plus": {
    
    
          "titleNView": {
    
    
            "buttons": [
              {
    
    
                "color": "#000",
                "fontSize": "28rpx",
                "text": "保存"
              }
            ]
          }
        }
      }
    }
<template>
  <view class="box"> 111 </view>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  // 按钮监听函数
  onNavigationBarButtonTap() {
    
    
    console.log("我是导航栏右侧的文字");
  },
};
</script>

猜你喜欢

转载自blog.csdn.net/qq_52099965/article/details/127834697