微信小程序自定义顶部组件customHeader的示例代码

1、开启配置自定义顶部 { "window": { "navigationStyle":"custom" } } 在app.json的文件window配置”navigationStyle”: “custom”属性即可 2、自定义顶部计算原理 2.1 获取系统状态栏的高度和屏幕宽度 使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。 2.2 获取右上角胶囊位置信息 使用wx.getMenuButtonBoundingClientRect()方法获取右上角胶囊位置信息。 关键问题在于自定义胶囊的上、下和左边距。 2.3 自定义顶部距离计算代码 app.js代