小程序自定义导航栏与悬浮按钮对齐
在小程序平台,如果原生导航栏被隐藏,仍然在右上角会有一个悬浮按钮,微信下也被称为胶囊按钮。我们常常由于业务需求需要自定义导航栏,此时导航栏内容与悬浮按钮水平垂直便是我们要解决的问题。为此我们需要使用小程序推荐给的api(这里讲解的是uniapp提供的api):
一、uni.getSystemInfoSync()
用于获取手机系统信息的同步方法,返回参数可以官网详细了解,这边就先了解我们需要的参数;
- brand: 当前手机设备品牌;
- model: 设备型号;
- windowWidth: 可使用窗口宽度;
- statusBarHeight: 状态栏的高度,指的是手机最顶部电量,网络状态那一行;
- navigationBarHeight: 导航栏的高度,这里指的是原生导航栏;
二、getMenuButtonBoundingClientRect()
用于获取小程序下该菜单按钮的布局位置信息,方便处理布局顶部内容时避开该按钮。这是同步方法,直接返回数据对象。(支付宝小程序不支持)注意:返回的尺寸是px
- width: 胶囊宽度;
- height: 胶囊高度;
- top:胶囊上边界坐标; || bottom: 胶囊下边界坐标;
- 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);