移动端键盘弹起引起的fixed定位问题/底部固定定位fixed安卓端输入键盘弹起顶到上面问题

最新推荐文章于 2023-04-25 15:14:59 发布

mxlWhb

最新推荐文章于 2023-04-25 15:14:59 发布

阅读量610

点赞数

文章标签： vue js html jquery vue.js

本文链接：https://blog.csdn.net/qq_42859450/article/details/105013465

版权

在这里插入代码片
```html![在这里插入图片描述](https://img-blog.csdnimg.cn/20200321174006900.jpg?x-os![在这里插入图片描述](https://img-blog.csdnimg.cn/20200321174045586.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU5NDUw,size_16,color_FFFFFF,t_70)s-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU5NDUw,size_16,color_FFFFFF,t_70#pic_center)
<button type="button" class="btn_submit" v-if="isOriginHei" @click="submit(formData)">提交</button>
js
export default {
  components: {},
  data() {
    return {
      formData: {
        remark: ""
      },
      isOriginHei: true,//在页面上控制元素的显示隐藏
      screenHeight: document.body.clientHeight,
      originHeight: document.body.clientHeight, //默认高度在watch里拿来做比较
    };
  },
  name: "",
  mounted() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.screenHeight = document.body.clientHeight;
          that.screenHeight = window.screenHeight;
        })();
      };
  },
  watch: {
    screenHeight(val) {
      console.log(val)
      val为获取的新的屏幕高度
      if (this.originHeight != val) {
        this.isOriginHei = false;
      } else {
        this.isOriginHei = true;
      }
    }
  },
};
<style>
.btn_submit {
  width: 1.84rem;
  height: 0.4rem;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
</style>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200321174107364.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODU5NDUw,size_16,color_FFFFFF,t_70)