uniapp头部标题栏初步方案

整体app采用沉浸式顶部

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

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

2、对于正常标题，正常配置

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

3、app自定义头部右边内容

//
{
			"path": "pages/home/mem-detail",
			"style": {
				"navigationBarTitleText": "会员详情",
				"app-plus": {
					"titleNView": {
						"buttons": [ //原生标题栏按钮配置,
							{
								"text": "保存", //
								"color":"#0072FF",
								"fontSize":"14px",
								"width":"40px"
							}
						]
					} //禁用原生导航栏
				}
			}
		},

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

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

```js
		{
			"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>

5、透明原生头部，只需要一个返回和标题

		{
			"path": "pages/home/detail",
			"style": {
				"navigationBarTitleText": "",
				"app-plus": {
					"titleNView": {
						"type": "transparent",
						"backgroundColor": "rgba(255,255,255,0)"
					}
				}
			}
		},

6、兼容app和小程序的状态栏高度

• var(–status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度，导致小程序高度不合适
• 统一动态获取状态栏高度

			// app.vue中动态获取状态栏高度，存入vuex
			const height = uni.getSystemInfoSync().statusBarHeight
			this.$store.commit('getHeight',height)

	// vuex
	state: {
		userInfo: uni.getStorageSync('userInfo') || {},
		token: uni.getStorageSync('token') || '',
		city: uni.getStorageSync('city') || '郑州市',
		history: uni.getStorageSync('history') || [],
		url: uni.getStorageSync('url') || 'https://ddcity.brt999.com/h5/#/',
		height: uni.getStorageSync('height') || 30,
	},
	mutations: {
		getHeight(state, height) {
			state.height = height
			uni.setStorageSync('height', state.height)
		},
	}

	//自定义头部的页面使用
	<view class="status_bar" :style="{backgroundColor: '#FFC600',height:height+'px'}">
	</view>

	import {mapState} from 'vuex'
	computed:{
		...mapState(['height'])
	},