关键API
getSystemInfoSync
getMenuButtonBoundingClientRect

链接: getSystemInfoSync.
链接: getMenuButtonBoundingClientRect.

自定义头部导航栏的适配
1.通过getSystemInfoSync获取到statusBarHeight和screenWidth
实现状态栏高度(电池等信息的状态栏)
2.getMenuButtonBoundingClientRect获取到右上角胶囊的指标
top: 胶囊顶部到手机顶部的距离
bottom: 胶囊底部到手机顶部的距离
bottom - top: 胶囊高度 或者 使用 height属性
3.有了这些数值就可以自己控制头部导航栏的样式了
适配:
状态栏高度 = (statusBarHeight*设计稿宽度)/screenWidth
标题栏高度= (((top - statusBarHeight)*2+height)*设计稿宽度)/screenWidth
这里乘2是下图两个箭头的距离

在这里插入图片描述

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐