首先,要在安卓系统出现这种情况经过我反复测试需要满足两种情况,才会触发:
1、最外层样式高度使用100vh;
2、页面内容高度没有撑满一屏;

解决方式:
通过监听键盘弹起、收缩来更改高度值
html

<div class="wrapper">
    <div class="prob_sugg_detail contain_main" ref="main">
      <van-tabs
        v-model="active"
        scrollspy
        sticky
        type="card"
        background="#E5E6E7"
        color="#ffffff"
        title-active-color="#2F3033"
        class="my_tabs"
      >
     </van-tabs>
   </div>
</div>

js

mounted() {
    this.keyboardListener();
},
// 一定要记得移除监听啊
beforeDestroy() {
    window.removeEventListener("resize", this.judgeKeyboardState);
},
// 监听键盘
    keyboardListener() {
      this.originHeight = document.documentElement.clientHeight || documentElement.body.clientHeight;
      window.addEventListener("resize", this.judgeKeyboardState);
    },
    // 判断是键盘弹起还是收起
    judgeKeyboardState() {
      const resizeHeight = document.documentElement.clientHeight ||
        documentElement.body.clientHeight;
      var u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      if (isAndroid) {
        if (resizeHeight < this.originHeight) {
          // 键盘弹起
          document.querySelector('.wrapper').setAttribute('style', 'height:100vh;')
        } else {
          // 键盘收起
          this.$refs.toolbar.$refs.search.blur();
          if (this.$el.querySelector(".van-tabs__content").scrollHeight < this.$refs.main.clientHeight) {
          document.querySelector('.wrapper').setAttribute('style', 'height:' + this.originHeight + 'px;')
        } else {
          document.querySelector('.wrapper').setAttribute('style', 'height:100vh;')
        }
        }
      }
    },

参考来源https://www.jianshu.com/p/e0408b1d57ac

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐