Remember to customize the top navigation bar of wechat applet

If there is a need, there must be a solution

How to make the custom navigation bar compatible with all models , Be sure to get statusBarHeight( The state height of the top ),
How to take it ？

The height of the status bar ：

Only under it can we write our customized navigation bar , So all models are applicable , Will not be blocked .

Be careful

1. On which page to customize the top navigation bar , Write another one for yourself , Small capsules will remain , The return button should be added by itself wx.navigateBack({delta: 1}) Just go
2. It is best to use a fixed layout fixed Otherwise, the navigation bar may scroll with the page , It's not easy
3. A page with a custom navigation bar , It returns the available height windowHeight It does not include the height of the status bar statusBarHeight Some places need to calculate the page height

Use

effect

This part of the circle is the navigation bar

You can also use pictures , Give him as high as you want