出现场景:
正常进入可以获取得到
但是进入小程序之后,点击右上角,点击重新进入小程序就会出现获取都为0的情况
console.log('oMenuBtn:',oMenuBtn);//打印 width:0,bottom:0,top:0,...
代码是写在App.vue里面,启动后获取状态栏的高度并存到vuex中使用
oMenuBtn = uni.getMenuButtonBoundingClientRect()console.log('oMenuBtn:',oMenuBtn);sysTopH = oMenuBtn.bottom + oMenuBtn.top - e.statusBarHeight;menuBtnMidlle = oMenuBtn.top + oMenuBtn.height / 2menuBtnbottom = oMenuBtn.top + oMenuBtn.heightconsole.log('状态栏高度:', sysTopBarH);console.log('胶囊中间位置', menuBtnMidlle);console.log('胶囊底部位置', menuBtnbottom);
最后看到网上的总结说给套一个定时器于是我照做了,但是仍然得不到解决
setTimeout(() => {
oMenuBtn = uni.getMenuButtonBoundingClientRect()console.log('oMenuBtn:',oMenuBtn);sysTopH = oMenuBtn.bottom + oMenuBtn.top - e.statusBarHeight;menuBtnMidlle = oMenuBtn.top + oMenuBtn.height / 2menuBtnbottom = oMenuBtn.top + oMenuBtn.heightconsole.log('状态栏高度:', sysTopBarH);console.log('胶囊中间位置', menuBtnMidlle);console.log('胶囊底部位置', menuBtnbottom);
})
最后是做了缓存,然后在状态管理里面再获取一次,正常进来获取到的值存缓存,获取不了就取缓存的
if( oMenuBtn.bottom!=0){//如果是0 的换就不存了,否则就刷新了缓存和状态里面的值this.setAppData({sysTopH,sysTopBarH,sys,menuBtnMidlle,menuBtnbottom})uni.setStorageSync('SYSTEM_INFO',{sysTopH,sysTopBarH,sys,menuBtnMidlle,menuBtnbottom})}
const SYSTEM_INFO= goodStorage.get('SYSTEM_INFO')//获取缓存里面的值
const store= new Vuex.Store({state:{//系统信息sys: SYSTEM_INFO&&SYSTEM_INFO.sys||'h5',isX:false,//是否是iPhoneX 为了兼容sysTopH:SYSTEM_INFO&&SYSTEM_INFO.sysTopH||0,//系统总高度sysTopBarH:SYSTEM_INFO&&SYSTEM_INFO.sysTopBarH||0,//系统 头部 状态栏高度menuBtnMidlle:SYSTEM_INFO&&SYSTEM_INFO.menuBtnMidlle||0,menuBtnbottom:SYSTEM_INFO&&SYSTEM_INFO.menuBtnbottom||0,}
这样就可以正常保证,选择重新进入小程序状态的值是正常OK 的;多谢!