现象

在 ios 系统,因为没有物理返回按键。

内嵌在微信浏览器的 h5 会在下方添加一个导航栏,方便用户来回的操作。

但是这存在一个问题,如果我们的 h5 最下方有内容,或者页面排版比较紧凑,会导致页面变形,遮挡等问题。

解决方案

协商

尽量页面不要铺满。

解决

隐藏掉对应的导航栏

隐藏导航栏的方式

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

可以在页面初始化的时候,清空对应的 history。

这样微信就认为不需要额外的滚动条,因为没有历史记录,

参考资料

https://blog.csdn.net/aloneiii/article/details/122122235