彻底解决iOS微信底部左右箭头的问题

• 0次浏览
• 2019-07-15 12:10:10

最近做微信公众号的开发，遇到 iOS新版微信的底部会出现返回小横条的坑。从公众号打开页面，底部有个返回的小横条，会遮挡页面底部。但是再刷新一下该组件页面，就不会遮挡了。其实就是第一次出现小白条时，页面高度获取会有问题。

一、解决部分问题

二、完全解决问题
但是，我们有的页面想要存在返回，毕竟返回上一步还是蛮好的体验。 所以小横条的问题还是不可逃避的。页面的高度是用window.innerHeight；获取的,而且是在页面dom加载完成后再获取，想着等小横条出来后，再获取高度，结果还是有问题的。有问题代码如下：

//该代码不能实现预想效果
mounted() {
//所有的dom加载完成后 加载函数
this.$nextTick(() => {
//计算列表组件的高度的函数
this.remainder();
});
},
而且有一个神奇的现象，第一次进来的时候是挡着的，但是刷新一下就不挡了。
难道第一次加载页面，所有的dom加载完成后，小白条还没有出现，所以此时获取的页面高度还是未加小白条的高度。怎么样做到小白条出来后再获取页面高度呢？
我先加了2S的定时器，验证想法，果然2S后获取的页面高度是去掉小白条的高度。所以该想法是正确的！于是代码改成：

mounted(){
//等微信多出来底部的返回条后,再获取高度,解决iOS新版微信底部返回横条问题
setTimeout(()=> {
this.remainder();
},200)
},

加点延时，解决问题！！！

参考文章:
1、iOS新版微信底部返回横条问题
https://blog.csdn.net/u013513053/article/details/82464989
2、用cookie解决新版微信中H5页面底部白条问题
https://blog.csdn.net/gaofei880219/article/details/80569026
3、微信开发 Weixin JS接口 隐藏微信中网页底部导航栏
https://blog.csdn.net/weixin_net/article/details/24268505

相关资讯

员工积分激励制度

• 2018-07-07

绩效管理为什么很难获得预期效果？

• 2018-07-07