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

最新推荐文章于 2024-07-17 11:37:40 发布

是小张呀！

最新推荐文章于 2024-07-17 11:37:40 发布

阅读量4.6k

点赞数

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/qq_52099965/article/details/127834697

版权

有时候登录和注册页面样式差不多相同的，这时我们就可以使用一个页面写登录和注册功能，如果想实现动态导航栏就可以使用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>