uni-app导航栏配置

2019-07-23 本文已影响10人瑟闻风倾

参考官网uni-app导航栏开发指南。

1. 原生导航栏-通用配置

(1) 原生导航优点

原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。
原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。

(2) 原生导航缺点

原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。

(3) 原生导航栏的通用配置： uni-app 自带原生导航栏，在pages.json里配置。

全局导航栏样式设置：在pages.json的globalStyle里进行各个参数配置

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Hello uniapp",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    "backgroundColorTop": "#F4F5F6",
    "backgroundColorBottom": "#F4F5F6",
    "mp-alipay": {
        "titleBarColor": "#FFFFFF"
    }
},

单页面导航栏样式设置：每个page下面的style配置中的navigationBar各个参数配置，即为通用配置，小程序、app、h5均生效。参考style设置每个页面的状态栏、导航条、标题、窗口背景色等

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "主页",  
    }
},

备注：单页面style中配置项会覆盖 globalStyle 中相同的配置项。

2. 全局取消原生导航栏

备注：一般App里不会使用这个参数配置。建议个别页面单独设置不使用原生导航。
(1) 在pages.json的globalStyle里有个navigationStyle设置，默认是default，即带有原生导航栏。
(2) navigationStyle设置为custom后，所有页面都没有原生导航。
说明：但在微信小程序里，右上角始终都有一个胶囊按钮。很多微信小游戏界面上也没原生导航栏，但有胶囊按钮。

"globalStyle": {
    "navigationStyle": "custom",
},

3. 单页面去除原生导航栏

说明：自微信客户端 7.0.0 起、App端HBuilderX 2.0.3起，支持通过如下方法取消单独一个页面的原生导航栏。但小程序右上角胶囊按钮仍然去不掉。页面配置 navigationStyle 为 custom：

{  
    "path" : "pages/index/index",  
    "style" : {  
        "navigationStyle":"custom"  
    }  
}

4. 原生导航栏在App侧的扩展

微信小程序的设计里，没有给原生导航提供太多自定义能力。在开发App时是不够用的。
在App下，每个page下面的style下面还有一个子扩展节点：app-plus（这个节点定义了在5+App环境下，也即iOS、Android环境下，增强的配置）。app-plus下可以设置titleNView等更多参数，可以得到比微信小程序更丰富的扩展性。另外，开发者也可以在必要时取消原生导航栏，使用view自行绘制导航栏。

4.1 App单独去除原生导航栏（注意顶部状态栏占位）

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "主页",  
        "app-plus": {  
            "titleNView": false  //不启用系统导航
        } 
    }
},

备注：在App去除原生导航栏后，小程序端侧仍保有原生导航栏。

4.2 App去除导航栏后改变状态栏样式

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

改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。如果想单独设置颜色，App端可使用plus.navigator.setStatusBarStyle设置。部分低端Android手机（4.4）自身不支持设置状态栏前景色。
改变状态栏背景颜色：通过绘制一个占位的view固定放在状态栏位置，设置此view的背景颜色，即可达到想要的效果，uni-app提供了一个状态栏高度的css变量，具体参考：uni-app内置的CSS变量。
(1) pages.json

{
    "path": "pages/index/index",
    "style": {
         // "navigationStyle":"custom",
        "navigationBarTitleText": "主页",  
        "app-plus":{
            "titleView":false
        }
     }
}

(2) index.vue

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

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        
    }
}
</script>

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

4.3 其他拓展功能样式

(1) 可参考Hello-UniApp的自定义导航栏示例

新建hello uni-app项目.png

自定义导航栏示例.png
(2) 也可参考ColorUI的自定义导航示例

ColorUI-UniApp.png