Vueでスライディングストップを検出する方法

フロントエンド開発においては、モバイルページの利用傾向が徐々に高まっていますが、同時にモバイル端末の操作方法もPC端末とは異なり、スライドはユーザーが最も頻繁に使用する操作の一つとなっています。 。スライディングはWeb閲覧時だけでなく、ニュースを読んだり、商品を閲覧したり、動画を視聴したりするなど、さまざまな用途でよく使われています。そのため、スライディングストップをいかに効果的に検出するかが多くのフロントエンドエンジニアにとって課題となっています。解決するために。

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、モバイル開発に Vue を使用する開発者が増えています。この記事では、Vueを使ってスライド停止を検出する方法を紹介します。

1. スライド イベントの概要

モバイル端末開発では、主に touchstart と touchmove という 2 つのイベントを使用してスライドを検出します。指が画面に触れると touchstart イベントがトリガーされ、指が画面上をスライドすると touchmove イベントがトリガーされます。この 2 つのイベントをリッスンして画面上の指の座標情報を取得し、指の移動距離を計算することで、スライドの方向と距離を取得できます。

2. スライディング ストップの検出方法

Vue では、カスタム命令を使用してスライディング イベントをリッスンすることができます。カスタム ディレクティブは Vue の非常に便利な機能で、イベントと属性を直接 DOM 要素に簡単にバインドできます。

次は簡単な例です。要素に v-touchend 命令を追加できます。この命令は、指が画面から離れたときにトリガーされ、指のスライドの方向と距離を取得できます。指示。

Vue.directive('touchend', {
  bind: function(el, binding) {
    let startX, startY;
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchend', function(event) {
      let endX = event.changedTouches[0].clientX;
      let endY = event.changedTouches[0].clientY;
      let distanceX = endX - startX;
      let distanceY = endY - startY;
      let direction = '';
      if (Math.abs(distanceX) < Math.abs(distanceY)) {
        // 垂直方向滑动
        if (distanceY < 0) {
          direction = &#39;up&#39;;
        } else {
          direction = &#39;down&#39;;
        }
      } else {
        // 水平方向滑动
        if (distanceX < 0) {
          direction = &#39;left&#39;;
        } else {
          direction = &#39;right&#39;;
        }
      }
      binding.value(direction, distanceX, distanceY);
    });
  }
});

この例では、バインド フック関数を使用してコマンドを登録し、addEventListener メソッドを通じて touchstart イベントと touchend イベントをリッスンし、指のスライドの距離と方向を計算して、結果を に渡します。コマンドにバインドされた関数。

3. スライディング ストップのアプリケーション シナリオ

モバイル開発では、プルダウンによる更新、プルアップによるロードなど、スライディング ストップを検出する必要があるアプリケーション シナリオが多数あります。 。スライディング ストップが検出されたときに対応するイベントをトリガーすることで、これらの関数を実装できます。

プルダウンの更新を例として、v-touchend 命令にバインドされた要素にプルダウン アイコンを追加できます。ユーザーが一定の距離までプルダウンすると表示され、プルダウンすると表示されます。 -down 更新イベントは、ユーザーが手を離すと自動的にトリガーされます。

Vue.directive('pull-refresh', {
  bind: function(el, binding) {
    let startX, startY;
    let refreshHeight = 60; // 下拉刷新高度
    let refreshIcon = document.createElement('img');
    refreshIcon.src = 'https://xxx.com/icons/refresh.png';
    refreshIcon.width = 40;
    refreshIcon.height = 40;
    refreshIcon.style.display = 'none';
    refreshIcon.style.marginLeft = '-20px';
    refreshIcon.style.position = 'absolute';
    refreshIcon.style.top = '-50px';
    el.appendChild(refreshIcon);
    el.addEventListener('touchstart', function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchmove', function(event) {
      let endY = event.changedTouches[0].clientY;
      let distanceY = endY - startY;
      if (distanceY > refreshHeight) {
        refreshIcon.style.display = 'block';
        binding.value();
      } else {
        refreshIcon.style.display = 'none';
      }
    });
  }
});

この例では、カスタム命令 v-pull-refresh を使用します。この命令を要素にバインドした後、ユーザーが 60 ピクセルを超えてプルダウンすると、プルダウン更新イベントがトリガーされます。

4. 概要

この記事では、モバイル端末のスライド イベントと、スライド停止を検出してプルダウンの更新やその他の機能を実現するカスタム命令を Vue に追加する方法を簡単に紹介します。プルダウン リフレッシュに加えて、スライディング ストップを使用して、プルアップ ローディング、画像カルーセル、その他の効果を実現することもできます。これらのスライディング コントロール スキルを習得することは、モバイル アプリケーションのユーザー エクスペリエンスを向上させるのに非常に役立ちます。

以上がVueでスライディングストップを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。