结合colourUi来自定义顶部和底部导航栏组件
1、自定义顶部
// 获取系统状态栏信息
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight; //手机状态栏高度
let capsule = wx.getMenuButtonBoundingClientRect();
if (capsule) {
this.globalData.Custom = capsule; //保存胶囊信息
this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight; //菜单栏高度
} else {
this.globalData.CustomBar = e.statusBarHeight + 50;
}
}
})
2、自定义底部
通过计算函数 calc 覆盖原来高度
{
height: calc(60px(假设值) + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
height: calc(60px(假设值) + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}