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+ ツリー
Composition API はロジック再利用手順を実装します。ロジックコードを関数に抽出します。...
さっそくコードを見てみましょう * { マージン: 0; パディング: 0; } 。容器 { マージ...
1. Docker環境を準備する2. fastdfsイメージを検索する 3. イメージをプルするdo...
CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...
成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...
日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...
目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...
目次DragEvent インターフェースデータ転送インターフェースの概要DataTransfer の...
tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...
XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...
序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...
1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...
mysql5.7.18の解凍版はmysqlサービスを起動します。具体的な内容は以下のとおりです。 1...
目次質問:答え:現実:知識ポイント結論は:要約する質問: MySQLフィールド、unsigned i...
この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...