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 + Electron でデスクトップ アプリケーションを作成するためのサンプル コード

1.vueパッケージングここでは、vueネイティブパッケージングコマンドを使用してvueプロジェクト...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

Centos7 での python3 のインストールとアンインストールに関するチュートリアル

1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...

HTML におけるスクリプトの配置に関する簡単な説明

以前は、スクリプトは HTML 内のどこにでも配置できると思っていましたが、今日、要件に取り組んでい...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

MySQL インデックス プッシュダウンを 5 分で理解する

目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...

MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します

mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...

MySQL innodb_autoinc_lock_mode について

innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...

vue2.x の徹底研究 - h 関数の説明

目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...

Windows 10でDockerコンテナのポートにアクセスできない問題に対する完璧な解決策

Windows 10 で Docker コンテナのポートにアクセスできない問題を解決する (ポート ...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

Ansibleを使用してTomcatをバッチでデプロイする方法

1.1 ディレクトリ構造の構築この操作は、nginx+mysql+tomcat+dbのディレクトリ構...

MySQL 5.7.24 のインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.24のインストールと設定のチュートリアルを参考までに紹介します。具...

携帯電話番号の真ん中の4桁を隠すMySQL SQL文の方法

最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...

Docker環境を構築する簡単な方法

まず、Docker とは何かを理解しましょう。 Docker は、アプリケーションをデプロイするため...