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+ ツリー
使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...
この記事ではVueを使ってプログレスバーの変更を簡単に実装してみましたので参考にしてください。具体的...
落とし穴1. ネット上の多くのチュートリアルでは環境変数を設定するファイル名はmy.iniと書いてあ...
目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...
目次I. 概要2. 従来の多段階イメージ構築3. Buildkitを使用してイメージをビルドする4....
問題を見つけるコンテンツをリストで表示すると、リスト内のコンテンツの数は多いかもしれませんが、ユーザ...
製品設計者は、複雑で大規模な製造システムと多様な市場に直面しているため、知識体系には幅広さと深さの両...
1. リストシンボルを設定するlist-style-type: attribute; //リストの...
質問:私のブログのエンコーディングは utf-8 です。ページを開くと空白になっていることもあります...
データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...
私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...
序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...
この記事の例では、テーブルを追加および削除するためのjsの具体的なコードを参考までに共有しています。...
リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...
序文最近、私の住居の電力事情が不安定で、突然の停電が頻繁に起こります。ノートパソコンを持っているので...