华为自带浏览器,我遇到的是华为华为 nove 3e,自带浏览器,见图
问题描述: 在vue项目中,进入个人中心页面(如图1),然后进入其他页面-会员开通(如图2),然后上滑该页面,使头部导航栏上缩隐藏,底部虚拟导航栏也隐藏(如图3),然后再返回个人中心,这样就会出现个人中心头部部分区域被隐藏,页面可点击元素的错位(如图4)
![](https://i-blog.csdnimg.cn/blog_migrate/7dfc852dde1b1a1b69a329d43ef82d79.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/b086289a39238e57f22acecafa01d51d.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/95d8be620f42d108a6ffa3337f3b7449.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/5eb4e2e35848e010b38be587f08271bb.jpeg)
这应该是浏览器在隐藏上下的虚拟按钮栏之后,对页面没有正确的重排重绘,在手动滑动页面后,错位问题将恢复,那么代码修复呢,想了很多办法,最后决定
fixStyleForHuawei: function() {
var ua = navigator.userAgent;
if (!ua.match(/HUAWEI/i) || !ua.match(/MQQBrowser/i)) return;
// 使页面加长200px
this.fixStyle = {
'padding-bottom': '200px'
}
this.$nextTick(function() {
var _this = this;
setTimeout(function() {
window.scrollTo(0, 200); // 上滑200px
}, 200);
setTimeout(function() {
window.scrollTo(0, 0); // 下滑到0位置,复原
}, 500);
setTimeout(function() {
_this.fixStyle = null; // 删除页面加长的部分
}, 1000);
});
}
既然触摸滑动可以修复问题,那么我们代码来滑动,以此来出发浏览器的重新布局。因为页面不够高,所以加长200px空白区域,然后上滑,再下滑会顶部复原, 然后删除添加的200px空白区域,这样就可以解决了。
这个是华为自带浏览器的虚拟导航栏导致页面错位,其他还有几个浏览器好像也有这种情况,不过我没试这个代码,有机会可以试试。
以上代码只在华为 nove 3e自带浏览器的vue h5项目里测试通过,其他问题可自测,如有不对和疑问,欢迎提出讨论,谢谢。