uniapp 配置导航栏右侧按钮

最新推荐文章于 2025-02-25 00:58:42 发布

十月ooOO

最新推荐文章于 2025-02-25 00:58:42 发布

阅读量9.1k

点赞数 6

分类专栏： # uniapp 文章标签： uniapp

本文链接：https://blog.csdn.net/KimBing/article/details/130214560

版权

uniapp 专栏收录该内容

11 篇文章

订阅专栏

文章讲述了如何在uniapp中配置页面的导航栏右侧按钮，包括在pages.json中的具体设置，如`titleNView.buttons`，以及如何设置按钮的文字和样式。此外，还介绍了如何响应按钮的点击事件，通过在页面中添加`onNavigationBarButtonTap`生命周期方法来处理点击事件，获取并处理点击按钮的相关信息。

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

uniapp 配置导航栏右侧按钮

一、pages.json 配置

uniapp 导航栏右侧的按钮配置在 pages.json 中，pages[].style.app-plus.titleNView.buttons

{
            "path": "pages/devices/Air/Air",
            "style": {
                "navigationBarTitleText": "精密空调",
                "enablePullDownRefresh": true,
                "app-plus": {
                    "bounce": "none",
                    "titleNView": {
                        "buttons": [
                            {
                                "fontSize": "15px",
                                "text": "配置"
                            },
                            {
                                "fontSize": "15px",
                                "text": "信息"
                            }
                        ],
                        "backButton": {
                            "background": "#00FF00"
                        }
                    }
                }
            }
        },

二、效果

然后它的两个按钮就显示在了右上角
在这里插入图片描述

三、如何响应按钮的点击事件

需要在当前页面中添加 onNavigationBarButtonTap 这个生命周期方法

onNavigationBarButtonTap(event) {
    console.log('nav button pressed', event)
},

当按钮点击的时候，点击事件的内容会以 object 的方式传给这个方法

它的内容是这样的：
在这里插入图片描述
使用的时候一般判断 text 的内容就可以了

参考官方文档：
https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview