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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux 上の MariaDB は root ユーザーで起動します (推奨)
>>: データ構造 - ツリー (III): 多方向検索ツリー B ツリー、B+ ツリー
目次vueルーター1. ルーティングの概念を理解する1.1 ルーティングとは何ですか? 1.2. バ...
序文この記事では、uniapp グローバル変数の実装方法をいくつかまとめています。詳細な知識は、uV...
序文このチュートリアルでは最新バージョンをインストールします。 NAS は非常に安定して動作するので...
conda アップデート conda pip で tf-nightly-gpu-2.0-previ...
Docker イメージの最初の行は FROM alpine などのイメージで始まりますが、最初のベー...
目次Linux ドライバーの共通機能 (copy_from_user open read write...
MySQL を初めて学ぶときは、区切り文字の本当の目的を理解していないかもしれません。区切り文字は、...
Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...
前回の記事「Zen Coding: HTML/CSS コードを素早く記述する方法」を公開した後、一部...
目次序文1. 基本データ2. 継承駆動設計3. 左右の値のエンコーディングに基づく設計4. ツリー構...
質問特定の MySQL 接続について、それがどのクライアント プロセスからのものであるかをどのように...
crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...
ドクター紹介: Docker はコンテナ関連の技術です。簡単に言うと、さまざまなソフトウェアを実行で...
目次docker システム df docker システム プルーンdocker systemc 情報...
日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...