cube-ui / question-answer

Q&A for cube-ui
16 stars 7 forks source link

cube-input组件手机键盘缩回后,页面不会跟着缩回这个问题如何解决? #112

Closed NickYangZY closed 4 years ago

dolymood commented 4 years ago

https://github.com/didi/cube-ui/issues/414

YUANHOWE commented 4 years ago

思路是监听键盘事件,待键盘收起(回落)时,页面回落到原来的位置,代码如下:`function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload !== "function") { window.onload=func; } else { window.onload=function() { oldonload(); func && func(); } } }

  var _fn = function () {
    var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if ( isiOS ) {
      var timeId = 0;
      var _top = 0;
      document.body.addEventListener('focusin', function() {
        //软键盘弹出的事件处理
        _top = document.documentElement.scrollTop || document.body.scrollTop;
        clearTimeout(timeId);
      });

      document.body.addEventListener('focusout', function() {
        //软键盘收起的事件处理
        timeId = setTimeout(function () {
          window.scroll(0, _top-1);
          this.$refs.scroll.scrollTo(0, 、/*this.scrollY*/页面原来滚动到的位置, 0);
          console.log('页面回落');
        }, 50);
      });
    }
  };
  try {
    addLoadEvent(_fn);
  } catch(e) {
    console.log(e);
  }`