微信底部导航栏页面适配
2019-02-18 本文已影响6人
raincoco
问题:
当网页在微信中打卡 进行了任意跳转 微信底部就会出现【向前 向后】的导航栏
此时页面底部元素被导航栏覆盖
以下是项目中的解决方案:
①.授权登录导致出现导航栏
1.已授权登陆过的用户记录登陆态 不再授权登陆
2.使用window.resize()监控页面大小变化 产生变化时重新计算body高度赋值
tips:加上1s的延时是为了兼容 网络不好情况 导航栏还未出现导致高度未计算准确问题

② 页面中跳转 回退导致上一个页面元素被导航栏挡住的情况
由跳转一个页面 回退到【跳转前】的页面时 第一种情况的方法无法解决问题
因为微信没有调用【跳转前】的页面上的ready resize onload等方法 想当于无法触发事件告知我们
用户点击了【返回】的事件。
可以通过为页面新增空history 让页面一开始就出现导航栏来解决页面元素被遮挡问题
在有跳转情况的页面中 在微信环境中 一开始就出现底部导航栏 后续无论跳转几个页面 元素都是基于【已有】导航栏渲染的 即不会出现被遮挡情况


以上 可以大概解决问题
但第二种方法不是很人性化
更好的方法 探索中.......