小程序自定义头部

微信小程序需要设置自定义头部时需要以下操作

"navigationStyle": "custom"

此时需要自己根据设备参数动态布局(这里以uniapp为例子)

//获取手机系统信息
const info = uni.getSystemInfoSync()
//设置状态栏高度
this.statusBarHeight = info.statusBarHeight
this.windowWidth = info.windowWidth

//h5 app mp-alipay
// #ifndef H5 || APP-PLUS || MP-ALIPAY
//获取胶囊的位置
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
console.log(menuButtonInfo)
// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
this.windowWidth = menuButtonInfo.left
// #endif