在移动端开发微信页面的过程中,出现这样一个问题
自己定好的底部导航栏下面会多出一行微信自带的底部返回栏,影响我们原型的体验,就需要对此做出优化;
首先明确问题所在
通过查询发现底部返回栏的机制是:页面出现跳转的时候会出现、页面向下滚动时会做隐藏;
解决问题
1. 针对上面的机制,对应两种办法去隐藏底部返回栏:
- 使用原生JS(已知是跳转出现,那我们就对跳转进行拦截,让所有的跳转使用 location.replace())
location.replace(URL)
- 如果你使用vue-router
let toURL = null
router.beforeEach((to, from, next) => {
if (toURL === to.path) {
next()
}
if (to.path !== from.path) {
toURL = to.path
router.replace(to.path)
next()
}
})
2.使页面可以向下滚动
注意replace()带来的问题,当你使用replace()时,浏览器没有历史记录
- 如果你不需要,那么恭喜你不用继续看下去了
- 如果你很不幸,你需要历史记录,那么也存在两种场景
2.1 微信浏览时不需要
判断是否微信浏览,如果是就进行replace()
let isWeiXin= window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'
2.2 微信浏览时需要
- 自己实现一个历史记录数组,每次replace()时存入记录