微信底部导航栏页面适配

2019-02-18  本文已影响6人  raincoco

问题:

当网页在微信中打卡 进行了任意跳转 微信底部就会出现【向前 向后】的导航栏

此时页面底部元素被导航栏覆盖

以下是项目中的解决方案:

.授权登录导致出现导航栏 

1.已授权登陆过的用户记录登陆态  不再授权登陆

2.使用window.resize()监控页面大小变化 产生变化时重新计算body高度赋值

tips:加上1s的延时是为了兼容 网络不好情况 导航栏还未出现导致高度未计算准确问题

页面中跳转   回退导致上一个页面元素被导航栏挡住的情况

由跳转一个页面 回退到【跳转前】的页面时  第一种情况的方法无法解决问题

 因为微信没有调用【跳转前】的页面上的ready resize onload等方法 想当于无法触发事件告知我们

用户点击了【返回】的事件。

可以通过为页面新增空history 让页面一开始就出现导航栏来解决页面元素被遮挡问题

在有跳转情况的页面中  在微信环境中 一开始就出现底部导航栏 后续无论跳转几个页面 元素都是基于【已有】导航栏渲染的 即不会出现被遮挡情况

以上 可以大概解决问题 

但第二种方法不是很人性化 

更好的方法 探索中.......

上一篇 下一篇

猜你喜欢

热点阅读