小程序的自定义导航适配

在开发小程序时，经常会用到自定义导航

{
	"navigationStyle": "custom"
}

但是呢，页面内容会直接顶到头，为了样式上更加美观，我们会获取状态栏的高度，结合右上角菜单按钮的高度（胶囊按钮）。

// 获取系统信息
const SystemInfo = uni.getSystemInfoSync();
// 获取状态栏高度
let statusBarHeight = SystemInfo.statusBarHeight;
let menu  = uni.getMenuButtonBoundingClientRect();
// 获取菜单按钮高度
let titleBarHeight = menu.height;
// 获取按钮距离顶部的距离
let top = menu.top;

let diff = (top - statusBarHeight) * 2;
// 计算两者总和高度
let navheight = statusBarHeight + diff + titleBarHeight;

因为菜单按钮距离顶部的高度，并不是状态栏的高度，两者之间存在间距。为了美观，获取间距，并且使菜单按钮上下同等间距。最后的自定义导航栏的高度=状态栏的高度+菜单按钮的高度+两个间距。

可以利用以上数据，开发和菜单按钮水平对齐的，返回按钮，搜索框，tabs等。

注：生命周期问题