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+ ツリー

推薦する

Vue3 コンポジション API でロジックの再利用を実装する方法

Composition API はロジック再利用手順を実装します。ロジックコードを関数に抽出します。...

カルーセルバナーの自動回転効果を実現する純粋な CSS

さっそくコードを見てみましょう * { マージン: 0; パディング: 0; } 。容器 { マージ...

Docker に fastdfs イメージをインストールする際の注意事項

1. Docker環境を準備する2. fastdfsイメージを検索する 3. イメージをプルするdo...

CSS 位置固定左と右の二重配置実装コード

CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

組み込みオブジェクトに関するJavascriptの基礎

目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...

JavaScript ドラッグタイム ドラッグケースの詳細な説明

目次DragEvent インターフェースデータ転送インターフェースの概要DataTransfer の...

Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)

tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...

mysql5.7.18 解凍バージョンで mysql サービスを起動します

mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...

int(3)とint(10)の値の範囲はmysqlで同じですか?

目次質問:答え:現実:知識ポイント結論は:要約する質問: MySQLフィールド、unsigned i...

ブラインドの特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...