【开发日志】获取手机系统状态栏与胶囊按钮高度并用nav-bar占位

事情是这样的因为想做一个图片展示类的小程序，于是找了一套源码准备修改一下拿来用，结果发现，顶部状态栏和胶囊按钮部分设置的是沉浸式，于是就想调一下，结果在pages.json文件里各种修改，就是不起作用，最终只能用nav-bar来占位了。

第一部分：nav-bar占位

第二部分：变量定义

export default { mixins: [IndexJs], data() { return { // 状态栏高度变量 statusBarHeight: 0, // 胶囊按钮高度变量 menuButtonHeight: 0, // 胶囊按钮高度补充 menuButtonHeightFix: 10, } },

第三部分：获取状态栏和胶囊按钮高度

// 获取系统状态栏高度和微信小程序高度，解决页面内容与系统状态栏与微信小程序胶囊按钮重叠的问题 mounted() { // 获取系统信息 const systemInfo = uni.getSystemInfoSync(); // 获取状态栏高度 this.statusBarHeight = systemInfo.statusBarHeight; // 获取胶囊按钮信息 const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 获取胶囊按钮高度 this.menuButtonHeight = menuButtonInfo.height; },