uni-app 布局遇到的问题

1、头部

先看一遍 导航栏开发指南 ，原生的头部无法满足一些需求比如：插入用户头像点击头像显示侧边栏，如果需要用hello-app中的自定义头像要注意如果设为fixed，组件在父节点占用的位置会变为空，需要修改组件最外层的节点样式，让它一直占用44px。

.uni-navbar{
	width: 100%;
	height: 44px;
	/* #ifdef MP */
		height: 64px;
	/* #endif */
	/* #ifdef APP-PLUS */
		height: calc(44px + var(--status-bar-height));
	/* #endif */
}

使用自定义头部前要把原生的头部去除：

{
	"path" : "pages/formPage/login",
	"style" : {
		"navigationBarTitleText": "登录",
		"navigationStyle": "custom",
		"app-plus": {
			"titleNView": false
		}
	}
}

上面设置后，会发现头部消失了，但是自定义的头部顶到手机的状态栏上了
需要再修改uni-nav-bar的样式

.uni-navbar__content {
	display: block;
	position: relative;
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	/* #ifdef MP */
		padding-top: 20px;
	/* #endif */
	/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
	/* #endif */
}

2、底部

uni-app原生的底部不会被侧边栏遮挡，你可以重写一个自定义的底部，但是原生底部有许多有用的接口比如：显示红点和数字、如果不想重写、不想放弃这些接口、又觉得显示侧边栏时显示底部很难看的话可以选择在侧边栏显示时隐藏原生底部。

watch:{
	visible(val){
		//只有小程序和挨批评端会出现drawer遮挡的问题
		// #ifndef H5
		if(val){
			uni.hideTabBar();
		}else{
			uni.showTabBar();
		}
		// #endif
	}
}

3、scroll-view

scroll-view使用100vh要注意原生的组件不包括在100vh中，如果使用了自定义的头部和底部需要计算减去，如果是小程序或者app需要减去手机的状态栏高度。

.tabBar-scroll-y{
	/*
	* 44px：自定义头部高度
	* 20px：小程序手机状态栏高度
	* var(--status-bar-height)：app手机状态栏高度
	* */
	height: calc(100vh - 44px);/*H5*/
	/* #ifdef MP */
		height: calc(100vh - 44px - 20px);
	/* #endif */
	/* #ifdef APP-PLUS */
		height: calc(100vh - 44px - var(--status-bar-height));
	/* #endif */
}

4、下拉刷新

{
	"path" : "pages/tabBar/community/community",
	"style" : {
		"navigationBarTitleText": "社区",
		"navigationStyle": "custom",
		"app-plus": {
		"titleNView": false
		},
		"enablePullDownRefresh": true
	}
},

注意scroll-view无法触发实现下拉刷新