解决:uni.getMenuButtonBoundingClientRect();获取到的数据都为零的问题

出现场景:

正常进入可以获取得到
但是进入小程序之后,点击右上角,点击重新进入小程序就会出现获取都为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 的;多谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黒客与画家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值