vue单页面在iOS微信浏览器中弹出底部栏导致的样式问题

只需要在app.vue的mounted里面添加如下代码即可解决这个问题

 mounted() {
    const u = navigator.userAgent
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (isiOS) {
      window.history.pushState({}, 'title', '#')
    }
  },

这里顺便说一下在ios页面下出现了无法滚动的Bug，可以尝试使用以下方式解决，
例如，这个warpper是产生滚动条的地方

<template>
  <div class="home footer-bar">
    <!-- 头部搜索 -->
    <search />
    <div class="wrapper">
      <!-- 首页的各部分内容 -->
      <home-content />
    </div>
  </div>
</template>

data() {
    return {
      startX: 0,
      startY: 0
    }
  },

  mounted() {
    this.watchingScroll()
  },

methods: {
    touchStart(e) {
      try {
        const touch = e.touches[0]
        const x = Number(touch.pageX)
        const y = Number(touch.pageY)
        this.startX = x
        this.startY = y
      } catch (e) {
        console.log(e)
      }
    },
    watchingScroll() {
      document.addEventListener('touchstart', this.touchStart)
      const ele = document.querySelector('.wrapper') //产生滚动条的元素
      ele.ontouchmove = e => {
        const point = e.touches[0]
        const eleTop = ele.scrollTop
        const eleScrollHeight = ele.scrollHeight
        const eleOffHeight = ele.offsetHeight
        const eleTouchBottom = eleScrollHeight - eleOffHeight
        if (eleTop === 0) {
          if (point.clientY > this.startY) {
            e.preventDefault()
          }
        } else if (eleTop === eleTouchBottom) {
          if (point.clientY < this.startY) {
            e.preventDefault()
          }
        }
      }
      ele.ontouchend = () => {}
      // 如果还要禁止别的div，可以这样直接禁止，或者在这个div加上样式touch-action: none;
      const search = document.querySelector('.head-search')
      search.ontouchmove = e => {
        e.preventDefault()
      }
    }
  }
}
</script>