uni-app跨平台开发与应用

原创已于 2025-06-28 01:32:04 修改 · 833 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2025-06-28 01:24:31 首次发布

1.1取消导航栏

原生导航栏的扩展能力是有限的，特别是微信小程序中没有提供太多导航栏的配置，因此在某些情况下需要取消原生导航栏，再使用 view 自行绘制导航栏

1.1.1全局取消

在 pages.json 的 globalStyle 中存在 navigationStyle 设置，默认值是 default ,即带有原生导航栏；将其设置为 custom 后，所有页面将取消原生导航栏。

1.1.2单独取消

在页面的 style 属性中配置 navigationStyle 为 custom 可单独取消一个页面的原生导航栏，代码如下：

{
    “path” : "pages/log/log",
    "style" : {
        "navigationStyle":"custom"
    }
}

1.2导航栏样式

在开发App时，需要更灵活的自定义导航栏。因此，uni-app在 pages.json 文件中的每个 pages 节点下的 style 属性下提供了一个子扩展节点：app-plus。该节点定义了在 HTML5+App 环境下，即在iOS、Android 环境下增强的配置。其中，有一个子节点 titleNView 是 HTML5+规范中 Webview 页面的原生导致窗体规范。另外，在H5端也实现了 titleNView 的常用配置，即 app-plus 节点下配置的 titleNView 在H5端也会生效。

下面根据不同需求，对导航栏进行不同的配制。

1.2.1 改变状态栏样式

App默认为沉浸式，因此去除导航栏后，页面顶部会直通状态栏区域，可能会有如下需求。

（1）改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。

如果想单独设置颜色，App端可使用 plus.navigator。setStatusBarstyle 方法进行设置。部分 Android 4.4 及以下版本的手机不支持设置状态栏前景色。

（2）改变状态栏背景颜色：绘制一个占位的view固定放置在状态栏的位置，设置此view的背景颜色，即可达到改变状态栏背景颜色的效果。uni-app 提供了一个控制状态栏高度的css变量，具体参考css变量介绍。

以下为改变状态栏背景颜色的示例。

在App端添加自定义状态栏，代码如下。

<!-- #ifdef APP-PLUS -->
<view class="status_bar">
    <view class="top_view"></view>
</view>
<!-- #endif -->

将自定义状态栏的高度设置为系统状态栏高度，并固定在页面顶部，代码如下。

.status_bar {
    height:var(--status-bar-height);
    width:100%;
    background-color:#F8F8F8;
}
.top_view {
    height:var(--status-bar-height);
    width:100%;
    background-color:#F8F8F8;
    top:0;
    z-index:999;
}

1.2.2 导航栏随着页面滚动改变

原生导航栏还支持透明渐变效果——页面刚载入时没有导航栏标题，页面内容和状态栏联通，页面向下滚动后导航栏逐渐显示出来。其配置代码如下。

{
"path":"pages/log/log",
"style":{
    "navigationBarTitleText":"hello"
    "app-plus":{
        "titleNView":{
            "type": "transparent"
            }
        }
    }    
}

透明渐变的导航栏的button图标有一个默认的灰色背景图，以防止背景图和按钮前景颜色相同导致无法看清按钮。如果要删除该灰色背景图，可以配置button的背景颜色为透明:background: 'rgba(0,0,0,0)'。

1.2.3 图片背景

titleNView在uni-app 2.6.3以上版本中可以直接配置图片，并且支持GIF格式。这里提供一个“黑科技”写法，通过在titleNView中配置tags，可以实现在导航栏绘制图片的效果，示例代码如下。

{
    "path" :"nav-image/nav-image",
    "style" :{
        "app-plus" :{
            "titleNView":{
                "titleText" :"",
                "tags":[
                     {
                        "tag" : "img",
                        "src" :"/static/nav.png",
                        "position":{
                            "left" :"auto",
                            "top" : "auto",
                            "width" : "110px",
                            "height" : "26px"
                        }
                    }
                ]
            }
        }
    }
}

通过在titleNView中配置tags除了可以在导航栏绘制图片，还可以绘制更多丰富的内容，如richtext(富文本)、font(文本)、input(输人框)、rect(矩形区域)。

1.3 添加自定义按钮

在titleNView节点中添加自定义的导航按钮，按钮的text内容推荐使用字体图标。如果按钮使用的文字较长，建议把字体缩小一些，或调节按钮宽度等。自定义按钮可以添加红点和角标，还能配置为下拉选择按钮。

1.3.1 红点和角标

要在导航栏右上角显示消息，通常需要给自定义的按钮添加红点或角标。配置示例代码如下。

{
    "path" :"nav-dot/nav-dot",
    "style" :{
        "navigationBarritlerext":"导航栏带红点和角标"，
        "app-plus" :{
            "titleNView" :{
                "buttons" :[
                    {
                        "text”:"消息",
                        "fontSize" :"14",
                        "redDot": true
                    },
                    {
                        "text":"关注",
                        "fontSize" :"14",
                        "badgeText":"12"
                        }
                    ]
                }
            }    
        }
    }
}

1.3.2 下拉选择

在涉及类似城市选择的功能时，通常需要让自定义按钮提供下拉选项，此时只需要将自定义按钮的select属性配置为true即可。配置示例代码如下。

{
    "path":"nav-city-dropdown/nav-city-dropdown",
    "style" :{
        "navigationBarTitleText":"导航栏带城市选择",
        "app-plus" :{
                "titleNView" :{
                "buttons" :[
                    {
                        "text":"北京市",
                        "fontSize":"14",
                        "select" : true,
                        "width" :"auto"
                    }
                ]
            }
        }
    }
}

1.4 原生搜索框

原生导航栏支持放置原生搜索框，原生搜索框可以点击直接弹出软键盘，也可以点击后跳转到新页面进行搜索。配置示例代码如下。

{
    "path":"pages/search/search"，//搜索页面
    "style":{
    "app-plus":{
        "titleNView":{
        "searchInput":{
            "backgroundColor":"#fff",
            "borderRadius":"6px",//输入框圆角
            "placeholder":"请输入搜索内容",
            "disabled":true //disable时点击输入框不置焦，可以跳转到新页面搜索
            }
        }
    }
}

1.5 动态修改样式

如果需要JS动态修改导航栏，可以通过setStyle方法修改标题、背景色、前景色。该方法是App、小程序、H5端都支持的，可参考“使用uni.setNavigationBarTitle接口动态设置当前页面的标题”一文(相关设置文档链接见“资源文件\网址索引.docx”)。
对于App侧扩展的设置，如自己添加的buttons，需使用plus的JSAPI进行动态设置。在App端可以使用setStyle方法进行设置，包括修改Webview对象的titleNview属性，以达到修改标题栏按钮文字及样式的目的。示例代码如下。

//#ifdef APP-PLUS
var webView= this.$mp.page.$getAppwebview();

//修改buttons
//index:按钮索引,style {webviewritleNViewButtonstyles}
webView.setTitleNViewButtonstyle(0，{
    text:'hello'，
});


//修改按钮上的角标
//index:按钮索引;   text:角标文本内容
webView.setTitleNViewButtonBadge({
index:0，
text:10，
)};


//设置searchInput的focus
//focus: true | false
webView.setTitleNViewSearchInputFocus(true)

//设置searchInput的text
webView.setTitleNViewSearchInputText(text)