html5 固定底部-微信浏览器打开H5页面顶部导航栏（左右箭头）固定或隐藏（vue）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

解决iPhone进入微信公众号跳转页面后，顶部会出现一行后退和前进的问题。 按钮上下滑动时，可以隐藏和显示该栏，但快速滑动时，浏览器中的状态栏消失后html5 固定底部，顶部的状态栏也会消失。 落到顶部html5 固定底部，按住幻灯片显示一段顶部页面穿透，效果不好。所以下面的技巧让导航栏在上下滑动时固定

固定顶部导航栏的解决方案：两步

第一步：

将 viewport-fit=cover 添加到元标记中

第二步：

为滚动页面时需要固定顶部导航栏的页面添加样式：

  

  

  



.pay-page{
  height:100%;
  overflow:auto;
}

以下是企业账号隐藏导航栏的实现

企业账号开发者中心--接口文档

代码：

function onBridgeReady(){
   WeixinJSBridge.call('hideToolbar');
}
if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    }else if (document.attachEvent){
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
}else{
    onBridgeReady();
}

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    WeixinJSBridge.call('hideToolbar');        // 隐藏底部状态栏
    WeixinJSBridge.call('hideOptionMenu');     // 隐藏右上角的三个点的选项
    WeixinJSBridge.call('showToolbar');        // 显示底部状态栏
    WeixinJSBridge.call('showOptionMenu');     // 显示右上角的三个点的选项
});

下面是实现Momo自带的顶部导航栏返回自定义页面：

vue苹果浏览器微信公众号顶部回滚栏修复或隐藏的方法

实现代码：

mounted() {
    this.back();
}，
methods: {
//监听微信自带的返回按钮
//写入空白的历史记录 
pushHistory() {
//写入空白历史路径
  let state = {
    title: 'title',
    url: "#"
  }
  window.history.pushState(state, state.title, state.url)
},
back() {
  this.pushHistory();
  window.addEventListener("popstate", function (e) {
    location.href = ''（此处为要跳转的制定路径）
  }, false);
},
}