出现场景:
正常进入可以获取得到
但是
进入小程序之后,点击右上角,点击重新进入小程序就会出现获取都为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 / 2
menuBtnbottom = oMenuBtn.top + oMenuBtn.height
console.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 / 2
menuBtnbottom = oMenuBtn.top + oMenuBtn.height
console.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 的;多谢!