微信小程序自定义顶部组件customHeader如何编写成长尾词？

本文共计1091个文字，预计阅读时间需要5分钟。

1. 启动配置自定义顶部在app.json文件中，对window配置`navigationStyle`属性为`custom`，即可实现自定义顶部。

2. 自定义顶部计算原理

2.1 获取系统状态栏的高度和屏幕宽度

使用`wx.getSystemInfoSync()`方法获取系统状态栏的高度和屏幕宽度，为自定义顶部布局提供基础数据。

1、开启配置自定义顶部

{ "window": { "navigationStyle":"custom" } }

在app.json的文件window配置"navigationStyle": "custom"属性即可

2、自定义顶部计算原理

2.1 获取系统状态栏的高度和屏幕宽度

使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。

2.2 获取右上角胶囊位置信息

使用wx.getMenuButtonBoundingClientRect()方法获取右上角胶囊位置信息。
关键问题在于自定义胶囊的上、下和左边距。