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+ ツリー
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...
私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....
私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...
このチュートリアルでは、ウェブデザインにおけるFORMフォームタグのさまざまな属性の応用を紹介します...
この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...
1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...
Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...
この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...
目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...
目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...
HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...
目次1. 必須属性1. 名前2. バージョン2. 説明情報1. 説明2. キーワード3. 著者4. ...
MySQL 5.7.8 では json フィールドが導入されました。このタイプのフィールドは使用頻度...
CSS の適用範囲はグローバルです。プロジェクトがどんどん大きくなり、参加する人が増えるにつれて、命...
環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...