[小程序]自定义标题栏及胶囊菜单位置确定

比眉伴天荒 2023-02-22 13:32 144阅读 0赞

## 实现思路： ##

微信小程序的默认标题栏只显示页面标题，并由json文件中的navigationBarTitleText参数设定，这里就状态栏、标题栏及胶囊菜单说明一下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70]

1.  状态栏，这部分由设备决定，不同的设备这部分的布局是不同的
2.  标题栏，默认就是页面对应json文件中的navigationBarTitleText的直
3.  胶囊菜单 ，系统默认，不可删除  
    【划重点】小程序的自定义导航部分实际上是对状态栏及标题栏部分的占用位置不作默认填充，换句话说就是直接由设备顶部（top:0,left:0）开始渲染你的wxml。

## 设置自定义导航组件 ##

参见：[Navigation][]

页面的json文件中设置navigationStyle=custom  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 1] 效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 2]  
实际上我们设计页面的时候状态栏一般是不需要填充内容的，也就是说保留原状态，这里我们就需要知道状态栏的高度，胶囊菜单的位置布局，以辅助我们实现我们自己的效果。

## 获取状态栏及胶囊菜单的位置 ##

参考：[wx.getSystemInfo][]  
[getMenuButtonBoundingClientRect][]  
相信看过以上两个参考开发文档就应该有思路了。  
相比于在不知道参考文档时，大部分人的思路是通过调试获得状态栏及胶囊的布局信息  
***（我也这么干过，但是万恶的设备兼容性问题让我不得不回头来看获取设备信息接口）  
在iPhone Xs及iphone 6s测试发现，两者获取的数据差异较大，无论是按比例、固定值还是根据设备信息适配都是及其痛苦的。***  
既然给了接口，就直接用  
页面结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 3]js获取参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 4]参数结果  
![在这里插入图片描述][20200703180507249.png]  
得知了胶囊及状态栏的高度，就能行动了（一般来说，如果想跟胶囊菜单一致，仅知道胶囊的布局信息即可）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 5]这里不做深入实现，理一下思路：

1.  胶囊的布局信息里包含胶囊距离设备顶部（y=0）的高度（top）、胶囊高度（height）、距左位置信息
2.  借助胶囊top信息可以保持胶囊一致的渲染开始位置。
3.  借助胶囊的距左位置可以避免覆盖胶囊
4.  胶囊有内边距，如果垂直布局中容易偏上或偏下
5.  标题展示需要自己实现。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200703174134884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[Navigation]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/navigation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200703174814425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020070317493671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[wx.getSystemInfo]: https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html#%E5%8F%82%E6%95%B0
[getMenuButtonBoundingClientRect]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200703180311506.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200703180330446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[20200703180507249.png]: https://img-blog.csdnimg.cn/20200703180507249.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200703180646215.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70