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

推薦する

CSS セレクターの重みの理解(個人テスト)

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

VMware Workstation Pro でサーバー仮想マシンを構築する (グラフィック チュートリアル)

私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....

vuex で履歴を実装するためのサンプルコード

私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...

HTML フォームタグチュートリアル (2):

このチュートリアルでは、ウェブデザインにおけるFORMフォームタグのさまざまな属性の応用を紹介します...

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...

Linux userdel コマンドの使用法

1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...

Mysql クエリの結果セットを JSON データに変換するサンプル コード

Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...

JavaScriptでカレンダー効果を素早く実装

この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...

Vue + 要素の動的複数ヘッダーと動的スロット

目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...

よくある HTML タグの記述エラー

HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...

フロントエンド JavaScript ハウスキーパー package.json

目次1. 必須属性1. 名前2. バージョン2. 説明情報1. 説明2. キーワード3. 著者4. ...

MySQLでJSONフィールドを操作する方法

MySQL 5.7.8 では json フィールドが導入されました。このタイプのフィールドは使用頻度...

CSS 命名: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS の説明

CSS の適用範囲はグローバルです。プロジェクトがどんどん大きくなり、参加する人が増えるにつれて、命...

Nest.js 環境変数の設定とシリアル化の詳細な説明

環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...