微信小程序 自定义头部导航栏
关键APIgetSystemInfoSyncgetMenuButtonBoundingClientRect链接: getSystemInfoSync.链接: getMenuButtonBoundingClientRect.自定义头部导航栏的适配1.通过getSystemInfoSync获取到statusBarHeight实现状态栏高度(电池等信息的状态栏)2.getMenuButtonBoundi
·
关键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是下图两个箭头的距离
更多推荐
已为社区贡献3条内容
所有评论(0)