微信小程序自定义navigationBar顶部导航栏，兼容安卓ios

1.设置导航栏自定义"navigationStyle":"custom"

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/begin/begin",
			"style": {
				"navigationStyle":"custom"
			}
		},

效果如图

2. 获取胶囊按钮的布局信息

用wx.getMenuButtonBoundingClientRect()获取胶囊按钮信息，官方文档：Object wx.getMenuButtonBoundingClientRect() | 微信开放文档

const res = wx.getMenuButtonBoundingClientRect()

 

3.获取系统信息 wx.getSystemInfoSync() 官方文档：Object wx.getSystemInfoSync() | 微信开放文档

const systemInfo = wx.getSystemInfoSync();

 4.导航栏高度计算公式：

导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度

			const systemInfo = wx.getSystemInfoSync();
			const res= wx.getMenuButtonBoundingClientRect();
			this.height = (res.top - systemInfo.statusBarHeight) * 2 + res.height

export default {
		data() {
			return {
				height: '',
				background: {
					background: 'url(https://dangke.dcyu.com/assets/img/video_top_bg.png) no-repeat',
					backgroundSize: 'cover'
				}
			};
		},