Vueでスライディングストップを検出する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-13 11:34:55

オリジナル

1162 人が閲覧しました

フロントエンド開発においては、モバイルページの利用傾向が徐々に高まっていますが、同時にモバイル端末の操作方法も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(&#39;pull-refresh&#39;, {
  bind: function(el, binding) {
    let startX, startY;
    let refreshHeight = 60; // 下拉刷新高度
    let refreshIcon = document.createElement(&#39;img&#39;);
    refreshIcon.src = &#39;https://xxx.com/icons/refresh.png&#39;;
    refreshIcon.width = 40;
    refreshIcon.height = 40;
    refreshIcon.style.display = &#39;none&#39;;
    refreshIcon.style.marginLeft = &#39;-20px&#39;;
    refreshIcon.style.position = &#39;absolute&#39;;
    refreshIcon.style.top = &#39;-50px&#39;;
    el.appendChild(refreshIcon);
    el.addEventListener(&#39;touchstart&#39;, function(event) {
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener(&#39;touchmove&#39;, 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 サイトの他の関連記事を参照してください。