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+ ツリー
1.vueパッケージングここでは、vueネイティブパッケージングコマンドを使用してvueプロジェクト...
目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...
1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...
以前は、スクリプトは HTML 内のどこにでも配置できると思っていましたが、今日、要件に取り組んでい...
目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...
目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...
mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...
innodb_autoinc_lock_mode パラメータは、auto_increment 列を持...
目次解決、要約: vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、w...
Windows 10 で Docker コンテナのポートにアクセスできない問題を解決する (ポート ...
目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...
1.1 ディレクトリ構造の構築この操作は、nginx+mysql+tomcat+dbのディレクトリ構...
この記事では、MySQL 5.7.24のインストールと設定のチュートリアルを参考までに紹介します。具...
最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...
まず、Docker とは何かを理解しましょう。 Docker は、アプリケーションをデプロイするため...