前言
微信小程序凭借着“不占内存，即用即走”等特点，加上微信的社交的属性，其用户量一路保持快速的增长。对其的应用要求也日渐增高，使用更多样化、个性化。其中，对顶部导航的自定义实现，因交互功能成了一个普遍需要实现的组件，而尤因其不同设备下样式的兼容问题 如何更优雅的实现 使其成为大家讨论的热点。
下面我们从对其的设计、实现、使用上进行详细阐述，让大家更加了解这个组件。原创文章，若有写的不妥之处，欢迎大家指出更正。
自定义导航的设计
界面设计
目前，大多小程序对自定义导航的设计是：标题居中；左侧胶囊包裹返回上一页按钮和到首页按钮，要和右侧系统默认胶囊样式布局一致。效果如下：
功能设计
主要功能如下：
详细实现
布局样式实现
这个组件的实现的主要的重点在于不同设备上的样式兼容。由于右侧胶囊在不同设备下的表现是不一样的，所以左侧胶囊的布局样式要随不同设备进行自适应，既左侧胶囊的高度间距等样式数据要先计算出来再赋予其值。故难点就在于如何获得这些值。经过一番针对个别手机的兼容踩坑操作（此处省略一万字...😢），最终得到正解（此处感谢小伙伴的雪中送炭🙏），那就是可以一劳永逸的wx.getMenuButtonBoundingClientRect()
wx.getMenuButtonBoundingClientRect()
获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
菜单按钮的布局位置信息：
width 宽度(px)
height 高度(px)
top 上边界坐标(px)
right 右边界坐标(px)
bottom 下边界坐标(px)
left 左边界坐标(px)
有了这个关键点，下面带着大家看具体如何一步步优雅地完美地实现这个组件。
首先获取布局信息对象：
let menuRect = wx.getMenuButtonBoundingClientRect()
