微信浏览器打开H5页面底部导航栏(左右箭头)固定或隐藏（vue）-USB迷|专注于互联网分享

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

解决iphone进入微信公众号跳转页面后底部会出现一行回退前进按钮上下滑动时可以隐藏和显示该栏但是快速滑动时底部的的状态栏会等浏览器中状态栏全部消失后才会掉落至底部，并且按住滑动慧出现一段底部页面穿透，效果不好。所以下面这个方法上让导航栏在上下滑动的时候固定不动

把底部导航栏固定在不动方案：分两步

第一步：

在meta标签上加 viewport-fit=cover

<meta name="viewport"  content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

第二步：

在滚动页面需要固定底部导航栏的页面加样式：

<template>
  <div class="page">
  </div>
</template>
  
<script>
</script>

<style lang="less" scoped>
.pay-page{
  height:100%;
  overflow:auto;
}
</style>

下面这个是上针对企业号实现导航栏隐藏的实现

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

代码实现：

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');     // 显示右上角的三个点的选项
});

下面这个是实现微信自带底部导航栏返回到自定义页面：

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);
},
}