Vueモバイル端末は画面上で指をスライドさせる方向を判定する

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。

これを使うと、指で画面をスライドしてタブを切り替える機能を実装できます。例えば、JD.comの注文ページでは、このタブ切り替えを次のように実装できます。

ページ

<div
      @touchstart="ハンドルTouchstart"
      @touchend="handleTouchend"
      クラス="slotWrap"
    >
//画面のスライド//画面を指で押す handleTouchstart(event){
  this.startTime = Date.now()
  this.startX = イベント.changedTouches[0].clientX
  this.startY = イベント.changedTouches[0].clientY
},
//指が画面から離れる handleTouchend(event){
  定数 endTime = Date.now()
  定数 endX = event.changedTouches[0].clientX
  定数 endY = event.changedTouches[0].clientY
  //押している間の持続時間を判定する if(endTime - this.startTime >2000){
    戻る
  }
  //スライド方向 let direction = "";
  //まず、ユーザーのスライド距離が合法かどうかを判断します。合法の場合: スライド方向を決定します。距離には絶対値を加算する必要があることに注意してください if (Math.abs (endX - this.startX) > 10) {
    //スライド方向if(Math.abs(endY -this.startY)>30){
      // console.log("y 方向がオフセットしすぎているため、スライドできません")
      戻る
    }それ以外{
      方向 = endX -this.startX >0?"right":"left"
    }
  }それ以外{
    戻る
  }
  // ユーザーは正当なスライド操作を実行しました // console.log('direction'+direction)
  if(方向==='左'){
    (this.currents+1 === this.list.length) の場合 {
      戻る
    }それ以外{
      this.currents++
      //イベントをトリガー this.$emit('getData')
    }
  }
  if(方向==='右'){
    this.currents === 0 の場合
      戻る
    }それ以外{
      this.currents--
      //イベントをトリガー this.$emit('getData')
    }
  }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueモバイル端末が指のスライド効果を実現
  • 指を使って Vue ルーティング ページ間をスライドする方法
  • Vueモバイル端末での左右スライドイベントの詳しい説明
  • Vueモバイル端末は携帯電話を左右にスライドして入力するアニメーションを実現
  • Vueでモバイル端末上で左右スライド効果を実現する方法
  • vue2.0 モバイル スライド イベント vue-touch のサンプル コード
  • Vue カスタム モバイル タッチ イベント: クリック、スライド、長押しイベント
  • モバイル慣性スライド&リバウンドVueナビゲーションバーコンポーネントly-tabを書く
  • vue2.0 モバイルスライド用の better-scroll サンプルコード
  • Vue はモバイル端末シールドのスライディングマスクレイヤーの例を実装します

<<:  Linux 上の MariaDB は root ユーザーで起動します (推奨)

>>:  データ構造 - ツリー (III): 多方向検索ツリー B ツリー、B+ ツリー

推薦する

Vue で動的なスタイルを実現するためのさまざまな方法のまとめ

目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...

Linux システムで Java 環境変数を設定する方法

Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...

Docker で Kong API Gateway をインストールして使用する詳細なチュートリアル

1 はじめにKong は単純な製品ではありません。この記事で言及されている Kong は主に Kon...

JavaScript スロットリングとアンチシェイクに関する簡単な説明

目次スロットルと手ぶれ防止コンセプト:違いスロットリングの実装スロットル機能手ぶれ補正の実装手ぶれ防...

CSS スタイルの読み込みの優先順位に関する経験の共有

昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...

Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...

MySQLの基本の共通機能

目次1. 共通機能分類1.1 単一行関数: 1.2 グループ化機能: 2. 単一行関数3. 数学関数...

MySQL で UTF-8 エンコーディングを使用しないのはなぜですか?

MySQL UTF-8 エンコーディングMySQL は 2003 年のバージョン 4.1 から U...

JavaScript の実行コンテキストとコールスタックの詳細な説明

目次1. 実行コンテキストとは何か2. 実行コンテキスト スタックとは何ですか? 3. 実行コンテキ...

MySQL 5.7.21 のインストールと設定方法のグラフィックチュートリアル (ウィンドウ)

ウィンドウ環境にmysql5.7.21をインストールします。詳細は次のとおりです。 1. MySQL...

dns-prefetch とは何ですか? フロントエンドの最適化: DNS の事前解決によりページ速度が向上します

目次背景1. dns-prefetch とは何ですか? 2. dns-prefetch を設定するに...

Vue3.0はドロップダウンメニューのカプセル化を実装します

Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...