uniapp 原生导航栏动态修改标题 添加右侧文字按钮_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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <view class="box"> 111 </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad(e) {
    console.log(e);
    // 动态设置导航栏文字
    uni.setNavigationBarTitle({
      title: e.id === "1" ? "登录" : "注册",
    });
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

{
      "path": "pages/username/username",
      "style": {
        "navigationBarTitleText": "修改昵称",
        "app-plus": {
          "titleNView": {
            "buttons": [
              {
                "color": "#000",
                "fontSize": "28rpx",
                "text": "保存"
              }
            ]
          }
        }
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
  <view class="box"> 111 </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  // 按钮监听函数
  onNavigationBarButtonTap() {
    console.log("我是导航栏右侧的文字");
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15