IOS下的微信H5页面的底部前进后退横栏的解决方案
问题原因:在微信里只要发生页面跳转,这个控制浏览器前进后退的白色条就会出现。
方案1:经过查资料,很多人说可以调用Weixin为H5应用提供开放原生能力的JS接口来隐藏/显示底部的状态栏。代码如下
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar'); // 隐藏底部状态栏
WeixinJSBridge.call('hideOptionMenu'); // 隐藏右上角的三个点的选项
WeixinJSBridge.call('showToolbar'); // 显示底部状态栏
WeixinJSBridge.call('showOptionMenu'); // 显示右上角的三个点的选项
})
然而我试了下发现并没有效果,这个暂时只对企业微信有效。
方案2:this.$router.replace('/path')
这种方法可以很好的解决咱们的问题,但是需要自己写一个路由历史栈,去保存历史跳转的记录,然后监听路由返回,再从历史栈中去一个一个 回退,回退一个就移除掉一个。因为replace跳转方式是不存储路由的,也就是没法返回上一个页面,所以需要自己从历史栈中拿出最后一个存储的url再replace回去。
例子history=[{url:'a'},{url:'b'}]
当你进入第一个页面的时候将当前页面的url存储至history当中,全局的。当跳转进入b页面的时候使用replace。这样当前页面就显示b页面了。当需要继续跳转至C页面的时候在跳转之前判断一下要去的页面路由堆栈中是否存在。存在就取出来跳转将堆栈中的这一条记录移除,如果不存在就将当前页面路由保存至history,再replace到下一个页面。之后每当返回的时候都从历史堆栈中最后一个replace,然后移除就可以了。
历史路由堆栈的方法可以自己写,根据自己的思路写就行。。