微信小程序自定义导航栏
1. 在需要的页面.json文件中配置使用自定义导航栏: “navigationStyle”: "custom"
2. app.js文件 计算导航栏高度等信息
App({
globalData: {},
onLaunch() {
// ==========================导航栏计算============================
// 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
/*
1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2;
2. 胶囊按钮与顶部的距离 = top;
3.胶囊按钮与右侧的距离 = windowWidth - right
*/
console.log('设备信息=', res, '状态栏的高度=', res.statusBarHeight)
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top * 2, //胶囊按钮与顶部的距离
navHeight = (statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2) * 2;
this.globalData.navHeight = navHeight; //导航栏高度,整个顶部
this.globalData.navTop = navTop; // 导航栏上方的距离,手机信号等部分
this.globalData.navLeft = (res.windowWidth - menuButtonObject.right) * 4 //返回按钮左侧距离||导航栏左右padding
// this.globalData.windowHeight = res.windowHeight; //整体高度(导航栏+下方区域)
// console.log(this.globalData) // *2获取的是rpx
},
fail(err) {
console.log(err);
}
})
},
})