小程序组件之自定义顶部导航实例-创新互联

前言

微信小程序凭借着“不占内存，即用即走”等特点，加上微信的社交的属性，其用户量一路保持快速的增长。对其的应用要求也日渐增高，使用更多样化、个性化。其中，对顶部导航的自定义实现，因交互功能成了一个普遍需要实现的组件，而尤因其不同设备下样式的兼容问题 如何更优雅的实现 使其成为大家讨论的热点。

下面我们从对其的设计、实现、使用上进行详细阐述，让大家更加了解这个组件。原创文章，若有写的不妥之处，欢迎大家指出更正。

自定义导航的设计

界面设计

目前，大多小程序对自定义导航的设计是：标题居中；左侧胶囊包裹返回上一页按钮和到首页按钮，要和右侧系统默认胶囊样式布局一致。效果如下：

功能设计

主要功能如下：

1. 自定义 小程序 顶部导航 ：微信版本号 <7 的无此功能
2. 去首页 功能 ：首页没有此功能
3. 返回 功能：无上一页没有此功能
4. 模拟系统默认样式：和系统默认右边胶囊样式保持一致
5. 居中显示标题：字数过多时 省略号代替

详细实现

布局样式实现

这个组件的实现的主要的重点在于不同设备上的样式兼容。由于右侧胶囊在不同设备下的表现是不一样的，所以左侧胶囊的布局样式要随不同设备进行自适应，既左侧胶囊的高度间距等样式数据要先计算出来再赋予其值。故难点就在于如何获得这些值。经过一番针对个别手机的兼容踩坑操作（此处省略一万字...😢），最终得到正解（此处感谢小伙伴的雪中送炭🙏），那就是可以一劳永逸的wx.getMenuButtonBoundingClientRect()

wx.getMenuButtonBoundingClientRect()
获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
菜单按钮的布局位置信息：
width  宽度(px)
height  高度(px)
top  上边界坐标(px)
right  右边界坐标(px)
bottom  下边界坐标(px)
left  左边界坐标(px)

有了这个关键点，下面带着大家看具体如何一步步优雅地完美地实现这个组件。

首先获取布局信息对象：

let menuRect = wx.getMenuButtonBoundingClientRect()