最後の問題は、マイクロチャネルオープン

最後の問題は、マイクロチャネルオープン

最近の開発IMプロジェクトではなく、問題があることは、クライアントはブラウザ内部のマイクロ手紙の中で「オープンエンド」ということです。本当にとして、人々は非常に怒って作る

、それを解決するために始めます。

原則

実際には、ページのスクロール制御のために。ローリンググローバル禁止、ローカルスクロールを開きます。そこにいくつかの非友好的ですが、それは常に有用であるが

コード

それは自然なことですのでVUEはES6でそれであり、直接カスタムコマンド（指令）を作成すること。ここでは詳細に説明されていないカスタムコマンドを作成する方法として、あなたは、公式ドキュメントを表示することができます。

// scroll_fix.js
let scroll_fix = {
  inserted(el) {
    document.body.ontouchmove = (event) => {
        // 这里判断默认事件是否可以阻止
        if (event.cancelable && !event.defaultPrevent) {
            event.PreventDefault();
        }else {
        // 错误处理。。。
        }
    };
    
    let startX = 0,
      startY = 0;
    //touchstart事件
    function touchSatrtFunc(evt) {
      try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
        let touch = evt.touches[0]; //获取第一个触点
        let x = Number(touch.pageX); //页面触点X坐标
        let y = Number(touch.pageY); //页面触点Y坐标
        //记录触点初始位置
        startX = x;
        startY = y;
      } catch (e) {
        console.error("touchSatrtFunc：" + e.message);
      }
    }
    document.addEventListener("touchstart", touchSatrtFunc, false);
    let _ss = el;
    _ss.ontouchmove = function(ev) {
      console.log("ontouch");
      let _point = ev.touches[0],
        _top = _ss.scrollTop;
      // 什么时候到底部
      let _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;
      // 到达顶端
      if (_top === 0) {
        // 阻止向下滑动
        if (_point.clientY > startY) {
          ev.preventDefault();
        } else {
          // 阻止冒泡
          // 正常执行
          ev.stopPropagation();
        }
      } else if (_top === _bottomFaVal) {
        // 到达底部
        // 阻止向上滑动
        if (_point.clientY < startY) {
          ev.preventDefault();
        } else {
          // 阻止冒泡
          // 正常执行
          ev.stopPropagation();
        }
      } else if (_top > 0 && _top < _bottomFaVal) {
        ev.stopPropagation();
      } else {
        ev.preventDefault();
      }
    };
  }
}

export default scroll_fix

概要

一時的な問題の解決策ではなく、非常にエレガントなものの、フォローアップし、その後ゆっくりとそれを最適化します。