h5 android底部导航栏,安卓 微信端h5 页面 增加 底部导航栏总结

Aphorism

grow in errors

overview

最近在写一个 移动端的 jsp 项目， 应项目需求须在安卓机器上实现一个 ios 微信h5页面 底部的 导航条

想到的实现方案：

通过jsp 写一个 父页面然后 每个子页面通过 include 底部导航条， (android 和 ios 客户端不好区分且导航条会有闪烁效果)

通过 js 在每个页面中 底部添加一个导航条(每个页面的加载得判断客户端类型且跳转和刷新页面导航条会闪烁)

经过一段时间思考， 在我们写 vue 的时候， 我们可以通过父组件来实现 不会闪烁的导航条 ，但是我们是 jsp 页面。 功夫不负有心人， 可以通过 iframe 来实现子组件(页面) ， 我们将导航条放在父页面中， 且 父页面的职责就是 导航条的样式和 逻辑 将导航条和 子页面 分离开。

使用 iframe 优点如下：

解决了 跳转刷新导航条问题

子页面和导航条的 分离开来， (其实是为了以后维护， 不然去掉此功能的时候还得每个页面操作)

在弹层提示的时候 导航条不会被遮盖

面对的问题：

刷新页面的时候， iframe 页面会跳转到 src 中的对应路径(不是当前的 url)

地址栏灭有 url 变更， ios 就不会产生 底部导航条(可以通过这种方式去除 微信h5页面的导航条)

解决问题：

在父页面中 通过 sessionStorage 读取src指向的 url， 在 iframe load 的时候往sessionStorage 中写 url (注意一定要使用 session 而不是 local)a

判断为 ios 设