小程序自定义导航栏与悬浮按钮对齐

小程序自定义导航栏与悬浮按钮对齐

​ 在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。我们常常由于业务需求需要自定义导航栏，此时导航栏内容与悬浮按钮水平垂直便是我们要解决的问题。为此我们需要使用小程序推荐给的api（这里讲解的是uniapp提供的api）：

一、uni.getSystemInfoSync()

​ 用于获取手机系统信息的同步方法，返回参数可以官网详细了解，这边就先了解我们需要的参数；

1. brand： 当前手机设备品牌；
2. model： 设备型号；
3. windowWidth： 可使用窗口宽度；
4. statusBarHeight： 状态栏的高度，指的是手机最顶部电量，网络状态那一行；
5. navigationBarHeight： 导航栏的高度，这里指的是原生导航栏；

二、getMenuButtonBoundingClientRect()

​ 用于获取小程序下该菜单按钮的布局位置信息，方便处理布局顶部内容时避开该按钮。这是同步方法，直接返回数据对象。（支付宝小程序不支持）注意：返回的尺寸是px

1. width： 胶囊宽度；
2. height： 胶囊高度；
3. top：胶囊上边界坐标； || bottom： 胶囊下边界坐标；
4. right： 胶囊右边界坐标； || left： 胶囊左边界坐标；

三、解决导航栏与胶囊对齐

1、首先必须得自定义导航栏,取消默认导航栏:

"globalStyle": {"navigationStyle": "custom",}

2、设置自定义导航栏高度：

// 1.获取屏幕可使用宽度
let windowWidth = uni.getSystemInfoSync().windowWidth;
// 2.获取状态栏高度
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
// 3.获取胶囊按钮位置信息
const menuButton = uni.getMenuButtonBoundingClientRect();
			
// 4.计算出导航栏高度  换算成rpx
let navHeight = (menuButton.height + (menuButton.top - statusBarHeight) * 2) * (750 / windowWidth);
// 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx'; 
let statusBarTop = statusBarHeight * (750 / windowWidth);