uni-app实现顶部导航栏显示按钮+搜索框

最新推荐文章于 2024-06-20 13:41:59 发布

放错位的天才

最新推荐文章于 2024-06-20 13:41:59 发布

阅读量5.8k

点赞数 1

文章标签： json

原文链接：http://www.cnblogs.com/qisi007/p/10636164.html

版权

使用uni-app框架开发app时，可通过在pages.json中配置实现顶部导航栏显示按钮和搜索框。通过onNavigationBarButtonTap和onNavigationBarSearchInputChanged监听按钮点击和搜索框变化。当需要更复杂布局时，可关闭默认导航栏，使用titleNView属性来自定义导航栏，注意处理状态栏的透明问题。

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

最近公司准备做app，最终决定使用uni-app框架开发，但是当把设计图给我的时候我心里有点没底，因为他的设计图顶部长成这个样子：

因为这个功能在小程序是根本无法实现的，可能受这个影响，我感觉好像实现不了，但是我还是回头看了看文档，才发现，这个功能是可以实现的，只需要在pages.json中做一些配置即可

这个在官方称作app-plus,可以自定义导航区域，具体配置如下：

"pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarBackgroundColor": "#00c170",
                "app-plus": {
                    "bounce": "none",
                    "titleNView": {
                        "buttons": [ 
                            {
                                "text": "地图", 
                                "fontSize":"16",
                                "float": "right",
                                "color":"