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

推薦する

VueRouterルーティングの詳細な説明

目次vueルーター1. ルーティングの概念を理解する1.1 ルーティングとは何ですか? 1.2. バ...

uniappのグローバル変数実装の詳細な説明

序文この記事では、uniapp グローバル変数の実装方法をいくつかまとめています。詳細な知識は、uV...

Windows Server 2019 で NAS を構成する方法

序文このチュートリアルでは最新バージョンをインストールします。 NAS は非常に安定して動作するので...

Linux Tensorflow2.0のインストール問題を解決する

conda アップデート conda pip で tf-nightly-gpu-2.0-previ...

Dockerはbusyboxを使用してベースイメージを作成します

Docker イメージの最初の行は FROM alpine などのイメージで始まりますが、最初のベー...

Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

目次Linux ドライバーの共通機能 (copy_from_user open read write...

MySQLにおける区切り文字の定義と機能の詳細な説明

MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...

Linux カーネルの探究: Kconfig の秘密

Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...

Dreamweaver で Zen コーディングを使用する方法

前回の記事「Zen Coding: HTML/CSS コードを素早く記述する方法」を公開した後、一部...

MySQL ツリー構造データベース テーブル設計

目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...

MySQL は対応するクライアント プロセスにどのように接続しますか?

質問特定の MySQL 接続について、それがどのクライアント プロセスからのものであるかをどのように...

Linux のスケジュールタスク Crontab コマンドの使用に関する詳細な説明と概要

crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...

Docker 入門インストールチュートリアル (初心者版)

ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...

docker システムコマンドセットの使用

目次docker システム df docker システム プルーンdocker systemc 情報...

MySQLの詳細な説明Explain

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...