uni的顶部导航栏的右侧部分（文字、图标）设置

最新推荐文章于 2025-05-29 16:07:48 发布

Viole_t196

最新推荐文章于 2025-05-29 16:07:48 发布

阅读量3.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： 1 文章标签：前端 html css vue

本文链接：https://blog.youkuaiyun.com/Viole_t/article/details/129499354

1 专栏收录该内容

3 篇文章

订阅专栏

在开发过程中，通过修改pages.json定义页面路径并使用style设置页面标题。针对app-plus，重点在于titleNView的配置，特别是buttons属性，允许自定义顶部导航栏的文字。当点击导航栏右侧文字时，利用onNavigationBarButtonTap监听器实现相应功能的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在pages.json内编写出要的"path"

使用style样式.设置当前页面的标题。

使用app-plus---->

titleNView导航栏设置---->

buttons(可以自由设置顶部导航栏的属性)---->text(右侧文字))

随后点击导航栏右侧文字的跳转功能为：

onNavigationBarButtonTap() 为监听右侧文字的点击的事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Viole_t196

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp 自定义导航栏和右上角胶囊按钮对齐

weixin_39579031的博客

05-17

1255

如下图，红色区域为statusBar的区域，绿色区域为胶囊按钮的区域，胶囊按钮的区域包含灰色的按钮以及上下的padding空白，因此计算整个绿色区域的高度的公式应为：（蓝色线的高度（即胶囊按钮的top的值）- 红色状态栏区域的底statusBarHeight）* 2 + 胶囊按钮的height的值。自定义导航栏和右上角胶囊按钮对齐，需要分俩步走，一个是在上面搞个填充区用来填充刘海区域即statusBar, 然后计算出来胶囊区域的高度，让我们自己的导航栏内容高度一致，再css居中。

uni-app 自定义导航栏组件

yyxhzdm的博客

09-13

2416

效果图：使用一般需要隐藏原生导航栏，即可在pages.json文件中，对应的页面设置中添加一下代码即可： "navigationStyle":"custom" NavBar 导航栏 导航栏组件，主要用于头部导航，组件名：uni-custom-navBar，代码块： navigationBar。在script中引用组件： <script> import navigationBar from "../../components/uni-custom-navbar...

2 条评论您还未登录，请先登录后发表或查看评论

uniapp 使用app-plus自定义导航栏(titleNView)右侧自定义图标+文字按钮

最新发布

weixin_62733705的博客

05-29

1746

UniApp开发微信小程序时，可通过自定义导航栏实现左侧按钮的样式和功能定制。关键步骤如下：在pages.json中设置"navigationStyle": "custom"隐藏原生导航栏 使用uni.getSystemInfoSync()获取状态栏高度通过uni.getMenuButtonBoundingClientRect()获取右侧胶囊按钮位置信息动态计算导航栏高度，确保与原生导航栏一致使用绝对定位实现左侧自定义按钮，使其与胶囊按钮高度对齐页面内容需设置上边距避免被导航栏覆盖

Uniapp导航栏右侧自定义图标文字按钮

CHENC0518的博客

06-13

2421

fontSrc为字体图标文件 text为图标名称以\ue开头后面数字为字体图标中的数字，如果想拼接文字 "text": "\ue889 添加",即可。

uniApp 顶部导航栏右侧添加文字按钮

声声的博客

01-09

2745

【代码】uniApp 顶部导航栏右侧添加文字按钮。

UNI-APP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标

小歪博客

07-03

3137

UNIAPP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标

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

qq_52099965的博客

11-13

4982

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

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

10-16

本文将深入探讨如何在uni-app中自定义导航栏按钮，以及如何实现仿微信顶部导航条的功能。首先，要在uni-app中自定义导航栏按钮，我们需要对页面的配置文件page.json进行编辑。在这个文件中，我们可以通过配置app-...

uni小程序顶部导航栏字体大小

01-24

关于iOS导航栏返回按钮问题的解决方法

09-02

在iOS开发中，导航栏（`UINavigationController`）是应用界面常见的组件，它提供了一种在多个控制器之间导航的方式。导航栏通常包含一个左侧面的返回按钮，用于回退到上一个视图控制器。本篇文章将详细介绍如何解决...

uni、微信小程序自定义顶部导航栏(兼容适配所有机型)

03-04

### 创建兼容所有机型的自定义顶部导航栏 #### 1. 移除默认导航栏样式为了确保自定义导航栏能够完全控制布局，需先移除页面原有的默认导航栏。这可以通过配置 `pages.json` 文件中的 `"navigationStyle"` 属性为 `...

uni-app导航栏右侧功能按钮自定义图标显示

野猿新一

12-15

2858

uni-app中导航栏功能按钮只提供了一个text属性来设置按钮的显示文本，并未提供额外的设置图标的属性。4.双击打开demo_index.html文件，可以看到字体图标对应的Unicode，后面会用到。iconfont.ttf就是字体文件，拷贝到项目的/static/iconfont目录下。需要注意的是我们上个步骤得到的字体图标的Unicode为，需要把前面的&#x替换成\u。可以理解为可作为文本显示的图标，就像我们在微信聊天中插入的表情符号。通过text属性配置字体图标的Unicode。

uniApp顶部导航栏右侧添加按钮

a983677218的博客

12-13

1235

记录一下从阿里图库里面下载图标到项目中遇到的问题。原先图标引入后在浏览器可以正常显示，但是真机显示不了图标。最后去修改路由文件pages,加上app-plus，然后要修改text为css中更改的编码，然后填路径。在uniapp项目文件中引入，我这里是/static/iconfont/去修改css文件中的unicode编码，加上u。先下载到本地，然后解压后再要两个文件。然后重点，因为官方文件中。

uniapp 导航栏右侧文字按钮/图标按钮阿里巴巴矢量图引入

znx981912的博客

03-24

2852

添加代码至项目引入css以及ttf文件→static文件夹 APP.vue引入css 文字不用引入外部文件阿里巴巴矢量图需要引入先监听导航栏点击方法 onNavigationBarButtonTap(e){ console.log(e); } 文字 { "path" : "pages/maintenance/maintain/inventory/inventory", "style" :

uniapp自定义导航栏左中右内容和图标，以及点击事件

小香菜子的博客

03-22

1925

效果：methods:{// 处理返回逻辑，可以是uni.navigateBack或uni.switchTab等},// 处理设置图标点击事件})},title: '点击了设置',});top: 0;flex: 1;

uniapp隐藏导航栏左侧返回键，并自定义右侧的图片

qq_46131497的博客

04-28

1941

首先是显示右侧的图片，添加属性titleNView中添加buttons属性，其次，text是要填写的内容，如果是文字，直接填入就行，如果是图片，建议使用字体图标，在。中找到你要的图片，并加入购物车放置在项目中，主要是为了获取到 “文件名.ttf” 的文件，然后将文件路径写到fontSrc中，如图。在你想隐藏返回按钮的当前页面下，mounted 钩子里加上如下代码段，即可。但是这样会让右侧图片移动到左侧，所以我用的以下方法，将返回键隐藏但占位。这个文件打开 “文件名.ttf” 文件，获取文件的名字，如图。

uni-app修改原生标题右边文字

qq_36926045的博客

06-19

3481

methods方法中 editTitleText() {//编辑右上角按钮文字 let pages = getCurrentPages(); let page = pages[pages.length - 1]; // #ifdef APP-PLUS let currentWebview = page.$getAppWebview(); let titleObj = currentWebview.getStyle().titleNView; if (

uniapp修改导航栏的文字和图标并触发事件

欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！

03-28

2992

uniapp导航栏自定义文字图标设置

uniapp pages.json中注册页面后，动态设置页面上方tab的按钮

11-29

在UniApp项目中，`pages.json`文件主要用于配置项目的页面结构，而页面顶部的TabBar（导航栏）通常是在`app.json`中的`window`配置项中管理和动态设置的。如果你想在动态创建或注册新的页面后，改变对应的TabBar按钮状态，你需要在运行时修改`window`部分的配置。首先，在`app.json`中，你应该有一个类似这样的`window`配置： ```json { "window": { "navigationBarTitleText": "", "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "#fff", // 根据需求设置背景色 "tabBar": { "color": "#666", // 按钮文字颜色 "selectedColor": "#f00", // 选中按钮文字颜色 "borderStyle": "white", // 边框样式 "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/otherPage/otherPage", "text": "其他页" } // 其他已注册页面 ] } } } ``` 当你动态创建新页面，并想在TabBar添加对应按钮时，可以在相应的地方通过调用API `uni.setNavigationBarTitle`, `uni.updateNavigationBar`, 或者直接在生命周期钩子如`onLoad`、`onReady`等中修改`tabBar.list`数组。例如： ```javascript Page({ onLoad: function () { // 假设你已经动态创建了一个新的页面叫做'myNewPage' let newPageData = { pagePath: 'pages/myNewPage/myNewPage', text: '我的新页面', // 新页面的标题 }; this.globalData.tabBarList.push(newPageData); // 将新页面加入全局变量 // 然后在适当的时候更新TabBar uni.updateNavigationBar({ index: this.globalData.tabBarList.length - 1, items: this.globalData.tabBarList }); } }) ``` 记得在项目中维护好一个全局变量，用于存储所有TabBar的数据，以便随时更新。