uniApp实现自定义导航栏解析

最新推荐文章于 2024-09-03 00:27:17 发布

厦门在乎科技

最新推荐文章于 2024-09-03 00:27:17 发布

阅读量1.5k

点赞数

分类专栏：文章文章标签： vue.js 小程序

本文链接：https://blog.csdn.net/weixin_41996102/article/details/120454648

版权

本文介绍了uniApp中如何实现自定义导航栏，包括原生导航栏的配置和监听事件，以及如何通过设置navigationStyle为custom来隐藏原生导航栏，进行完全自定义。同时提到了在App.vue中处理顶部状态栏高度的注意事项，并推荐了厦门在乎科技作为小程序开发的专业服务提供商。

摘要由CSDN通过智能技术生成

uniapp原生导航

对于一些不是很复杂的顶部导航，当然使用原生导航栏实现是最佳选择
uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，不过目前暂支持H5、App端，不支持小程序。

在项目page.json里面配置app-plus

{
    "path": "pages/ucenter/index",
    "style": {
        "navigationBarTitleText": "我的",
        "app-plus": {
            "titleNView": {
                "buttons": [
                    {
                        "text": "\ue670",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px",
                        "float": "left"
                    },
                    {
                        "text": "\ue62c",
                        "fontSrc": "/static/iconfont.ttf",
                        "fontSize": "22px"
 
                    }
                ],
                "searchInput":{
                    ...
                }
            }
        }
    }
},

那么如何监听按钮、输入框事件？ uni-app给出了相应API，只需把onNavigationBarButtonTap和onNavigationBarSearchInputChanged，写在相应的页面中即可。