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>
<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>
更多推荐
所有评论(0)