uniapp标题栏初步方案

整体app采用沉浸式顶部

对于需要全屏的页面，开启自定义标题栏

	//pages.json
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle":"custom" //开启自定义标题
			}
		},
	]

对于正常标题，正常配置

// pages.json
{
			"path": "pages/news/index",
			"style": {
				"navigationBarTitleText": "快讯"
			}
		},

对于右边有图标的标题，采用自定义标题

• pages.json配置自定义标题
• 页面里可以使用uview的标题组件
• 自定义页面默认是沉浸式，需要一个盒子来撑起状态栏的高度

		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle":"custom" //开启自定义标题
			}
		},

<template>
    <view>
        <!-- #ifdef APP-PLUS -->  
        <view class="status_bar">  
            <view class="top_view"></view>  
        </view>  
        <!-- #endif --> 
        <view>  
            //自定义标题
        </view> 
    </view>
</template>
//顶部模拟状态栏的样式
//--status-bar-height是状态栏高度变量
<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>