解决：软键盘弹出导致已经被拖拽的图片回到原点

最新推荐文章于 2023-06-07 11:36:36 发布

she_lei_lei

最新推荐文章于 2023-06-07 11:36:36 发布

阅读量138

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/w_slch/article/details/111275085

版权

这篇博客主要介绍了如何在Vue应用中监听页面高度变化及软键盘弹出事件。作者通过`mounted`钩子设置窗口的`resize`事件监听页面高度，使用`watch`来响应高度变化，并在软键盘收起时执行特定操作。此外，还详细说明了如何在软键盘弹出时保持图片位置不变，避免因键盘遮挡导致图片位置回滚。

摘要由CSDN通过智能技术生成

首先，进行页面的高度变化监听事件

mounted() {
    //window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
    document.querySelector(".content").style.height = `${this.otherheight}px`;
    $(document).on("focusout", function () {
      setTimeout(() => {
        // 软键盘收起的事件处理
        window.scroll(0, 0);
      }, 300);
    });
  },

在watch 中，监听键盘弹出事件

showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.coustshow = false;
        this.blhe = true;
      } else {
        this.coustshow = true;
        this.blhe = false;
      }
      this.goaway();
    },

在data中可以提前获取页面高度

	docmHeight: document.documentElement.clientHeight, //默认屏幕高度
  	showHeight: document.documentElement.clientHeight, //实时屏幕高度

在watch监听中，当监听的内容发生变化时，就触发获取图片的transform，并再次进行赋值，便可以保持图片在原有的位置上不变

//软键盘弹出 保持图片不回到原点
goaway(){
  let trsuam = document.querySelector('.pinch-zoom');
  let ngstr =trsuam.style.transform;
  setTimeout(() => {
    trsuam.style.transform = ngstr
  }, 100);
},

定时器是必须要的，需要等图片重绘之后再赋值，否则会赋值原点的值。