移动端键盘弹起引起的fixed定位问题

当某输入框获取焦点时,底部导航一栏使用的是fixed定位,会被键盘顶起

这里的解决方案是当focus被触发时键盘会弹出,这时候页面就会发生scroll滚动,我们只需监听resize的变化,然后对应的变化时将底部隐藏,无变化时再显示

  data() {
    return {
      isShow: true,  // 底部菜单 v-show 状态值
      screenHeight: window.innerHeight, // 这里是给到了一个默认值
      originHeight: window.innerHeight, // 默认高度在watch里拿来做比较
    };
  },

  mounted: function () {
    const that = this;
    window.onresize = () => {
      return (() => {
        that.screenHeight = window.innerHeight;
      })();
    };
  },

  watch: {
    screenHeight: function (newValue) {
      console.log('newValue', newValue);
      if (this.originHeight > newValue) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },

但是这里没有去掉屏幕横竖屏切换的情况,竖屏变横屏时,因高度变小,菜单也会消失,有需要的可以自己加判断。

阅读 2.1k

推荐阅读