微信小程序自定义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

<u-navbar :is-back="false" title=" " :background="background" :border-bottom="false" :height="height"></u-navbar>

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