* Web API 7タッチスクリーンイベント、モバイル端末での一般的な特殊効果、クリック遅延ソリューション、モバイル端末での一般的な開発プラグイン、モバイル端末での一般的な開発フレームワーク、ローカルストレージ

1.1。タッチスクリーンイベント

1.1.1タッチスクリーンイベントの概要

モバイルブラウザの互換性が向上しました。以前のJSの互換性の問題を考慮する必要はありません。ネイティブのJS書き込み効果を自信を持って使用できますが、モバイル端末にも独自の場所があります。たとえば、AndroidとIOSの両方のタッチイベントタッチ（タッチイベントとも呼ばれます）。タッチオブジェクトはタッチポイントを表します。タッチポイントは、指またはタッチペンの場合があります。タッチスクリーンイベントは、画面またはタッチパッドで操作しているユーザーの指（またはスタイラス）に応答できます。

一般的なタッチスクリーンイベントは次のとおりです。
ここに画像の説明を挿入

1.1.2タッチイベントオブジェクト（TouchEvent）

TouchEventは、タッチプレーン（タッチスクリーン、タッチパッドなど）での指の状態変化を説明するイベントの一種です。このタイプのイベントは、1つ以上の連絡先を記述するために使用され、開発者が連絡先の移動、連絡先の増減などを検出できるようにします。

touchstart、touchmove、touchendの3つのイベントには、それぞれイベントオブジェクトがあります。

タッチイベントオブジェクトに焦点を当てる3つの一般的なオブジェクトのリストを見てみましょう。
ここに画像の説明を挿入

通常、要素のタッチイベントを登録するため、targetTocuhesを覚えておく必要があります

1.1.3モバイル端末で要素をドラッグします

touchstart、touchmove、touchendはドラッグ要素を実現できます
ただし、要素をドラッグするには、現在の指の座標が必要です。targetTouches[0]でpageXとpageYを使用できます。
モバイル端末でのドラッグの原理：指が動いているときに、指が動いた距離を計算します。次に、ボックスの元の位置+指で移動した距離を使用します
指が動く距離：指がスライドする位置から指が触れ始めた位置を引いた位置

要素をドラッグする3つのステップ：

（1）タッチ要素タッチスタート：指の初期座標とボックスの元の位置を同時に取得します

（2）指を動かすtouchmove：指のスライド距離を計算し、ボックスを動かします

（3）指をタッチエンドのままにします。

注：指を動かすと画面のスクロールもトリガーされるため、ここではデフォルトの画面スクロールを防止しますe.preventDefault（）;

1.2。モバイルでの一般的な特殊効果

1.2.1ケース：モバイルカルーセル

移动端轮播图功能和基本PC端一致。

自動的に写真を再生できます
指をドラッグしてカルーセルを再生できます

1.2.2。ケース分析：

自動再生機能
タイマー開始
モバイルモバイル、あなたは移動するために翻訳を使用することができます
写真を優雅に動かしたい場合は、トランジション効果を追加してください
自動再生機能-シームレススクロール
なお、判断条件は、画像がスクロールされるまで待ってから判断する、つまり遷移完了後に判断することです。
このとき、検出遷移完了イベントtransitionendを追加する必要があります
判定条件：インデックス番号が3の場合は、最後の画像に到達したことを意味し、この時点でインデックス番号を0に戻す必要があります。
このとき、画像はトランジション効果を取り除いてから移動します
インデックス番号が0未満の場合、それは逆方向に進むことを意味し、インデックス番号は2に等しくなります。
このとき、画像はトランジション効果を取り除いてから移動します

1.2.3classList属性

classList属性は、要素のクラス名を返すHTML5の新しい属性です。ただし、ie10以降のバージョンはサポートされています。

この属性は、要素内のCSSクラスを追加、削除、および切り替えるために使用されます。以下の方法があります

クラスを追加します。

element.classList.add（ 'クラス名'）；

focus.classList.add('current');

クラスを削除します。

element.classList.remove（ 'クラス名'）;

focus.classList.remove('current');

クラスの切り替え：

element.classList.toggle（ 'クラス名'）;

focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

1.2.4。ケーススタディ

小さな点が変化の効果に従います
現在のクラス名でliin olを選択して、クラス名を削除しますremove
現在のインデックス番号の小さなliに現在の追加を追加させます
ただし、遷移が終了した後は変更を待機しているため、これはtransitionendイベントに書き込まれます。
フィンガースワイプカルーセル
本質は、ulが指に沿って移動することです。これは、モバイル端末で要素をドラッグするだけです。
タッチ要素touchstart：指の初期座標を取得します
指を動かすtouchmove：指のスライド距離を計算し、ボックスを動かします
指をタッチエンドのままにします：スライド距離に応じて、さまざまな状況があります
移動距離が特定のピクセル未満の場合、元の位置にリバウンドします
移動距離が特定のピクセルよりも大きい場合は、前のピクセルと次のピクセルをスライドさせます。
スライドも左スライドと右スライドに分けられ、正または負の移動距離を判断基準とし、負の場合は左スライドと右スライドを意味します。
左にスワイプした場合は、次のものを再生します（index ++）
右にスワイプすると、前のものを再生します（インデックス-）

1.3.1。ケース：トップに戻る

ページがどこかにスクロールすると表示されますが、そうでない場合は非表示になります。

クリックしてトップに戻る

1.3.2。ケース分析

どこかにスクロールして表示します
イベント：スクロールページスクロールイベント
ロールされているヘッド（window.pageYOffset）が特定の値より大きい場合
window.scroll（0,0）をクリックして、先頭に戻ります。

1.4。クリック遅延ソリューション

モバイル端末のクリックイベントには300msの遅延があります。その理由は、モバイル端末の画面でページをズームするためにダブルタップすると、ズームするためにダブルタップするためです。

解決：

1.ズームを無効にします。ブラウザはデフォルトのダブルクリックズーム動作を無効にし、300msのクリック遅延を取り除きます。

  <meta name="viewport" content="user-scalable=no">

2. touchイベントを使用してこのイベントをカプセル化し、300ミリ秒の遅延を解決します。

原則は次のとおりです。

指が画面に触れると、現在のタッチ時間が記録されます
指で画面を離れるときは、離れた時間を使って、触れた時間を差し引きます。
時間が150ミリ秒未満で、画面がスワイプされていない場合は、クリックと定義します

コードは次のように表示されます。

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
    
    
        var isMove = false;
        var startTime = 0; // 记录触摸时候的时间变量
        obj.addEventListener('touchstart', function (e) {
    
    
            startTime = Date.now(); // 记录触摸时间
        });
        obj.addEventListener('touchmove', function (e) {
    
    
            isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击
        });
        obj.addEventListener('touchend', function (e) {
    
    
            if (!isMove && (Date.now() - startTime) < 150) {
    
      // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){
    
       // 执行代码  });

プラグインを使用します。fastclickプラグインは300msの遅延を解決します。

1.5。一般的に使用されるモバイル開発プラグイン

1.5.1。プラグインとは

モバイル端末は迅速な開発が必要なため、操作を完了するためにいくつかのプラグインを使用することがよくあります。プラグインとは何ですか？

JSプラグインはjsファイルであり、特定の仕様に従って記述されており、プログラムの表示効果に便利で、特定の機能があり、呼び出すのに便利です。カルーセル図やウォーターフォールフロープラグインなど。

特徴：一般的に特定の問題を解決するために特別に存在し、その機能は単一で比較的小さいです。

以前に作成したanimate.jsも、最も単純なプラグインと見なされています

fastclickプラグインは300msの遅延を解決します。遅延を使用する

GitHubの公式ウェブサイトアドレス：https：// github.com/ftlabs/fastclick

1.5.2。プラグインの使用

jsプラグインファイルを紹介します。
所定の文法に従って使用してください。
fastclickプラグインは300msの遅延を解決します。遅延を使用する

GitHubの公式ウェブサイトアドレス：https：//github.com/ftlabs/fastclick

if ('addEventListener' in document) {
      
      
            document.addEventListener('DOMContentLoaded', function() {
      
      
                       FastClick.attach(document.body);
            }, false);
}

1.5.3。Swiperプラグインの使用

中国の公式ウェブサイトアドレス：https：//www.swiper.com.cn/

プラグイン関連のファイルを紹介します。
所定の文法に従って使用してください

1.5.4。その他の一般的なモバイルプラグイン

lsuperslide：http：//www.superslide2.com/

lスクロール：https：//github.com/cubiq/iscroll

1.5.5。プラグインの使用法の要約

1.プラグインによって実装されている機能を確認します

2.公式ウェブサイトにアクセスして手順を確認します

3.プラグインをダウンロードします

4.デモサンプルファイルを開き、インポートする必要のある関連ファイルを表示して、インポートします。

5.デモサンプルファイルの構造html、スタイルcss、およびjsコードをコピーします

1.5.6。モバイルビデオプラグインzy.media.js

H5はビデオタグを提供しますが、ブラウザのサポートは異なります。

ソースを介してさまざまなビデオ形式のファイルを解決できます。

しかし、外観のスタイル、一時停止、再生、全画面表示、その他の機能は、解決する独自のコードしか記述できません。

現時点では、プラグイン方式を使用して作成できます。

JSを使用して、要素のサイズ、色、位置、その他のスタイルを変更できます。

1.6。モバイル向けの一般的な開発フレームワーク

1.6.1。モバイルビデオプラグインzy.media.js

フレームワークは、その名前が示すように、アーキテクチャのセットであり、独自の特性に基づいて比較的完全なソリューションをユーザーに提供します。フレームワークの制御はフレームワーク自体にあり、ユーザーはフレームワークで規定された特定の仕様に従って開発する必要があります。

プラグインは通常、特定の問題を解決するために特別に存在し、その機能は単一で比較的小さいものです。

一般的に使用されるフロントエンドフレームワークには、Bootstrap、Vue、Angular、Reactなどがあります。PCとモバイルの両方を開発できます

一般的に使用されるフロントエンドモバイルプラグインには、スワイパー、スーパースライド、iscrollなどがあります。

フレームワーク：大規模で完全なソリューションの完全なセット

プラグイン：小さくて具体的な、特定の機能のソリューション

1.6.2。ブートストラップ

Bootstrapは、Web開発をより速く、より簡単にする、シンプルで直感的で強力なフロントエンド開発フレームワークです。

PCや携帯端末の開発が可能

Bootstrap JSプラグインを使用する手順：

1.関連するjsファイルを紹介します

2.HTML構造をコピーします

3.対応するスタイルを変更します

4.対応するJSパラメータを変更します

1.7。ローカルストレージ

インターネットの急速な発展に伴い、Webベースのアプリケーションはますます一般的になり、同時にますます複雑になっています。さまざまなニーズを満たすために、大量のデータがローカルに保存されます。HTML5仕様関連するソリューションを提案します。プログラム。

1.7.1。ローカルストレージ機能

1.データはユーザーのブラウザに保存されます

2.セットアップと読み取りが簡単で、データを失うことなくページを更新することもできます

3.大容量、sessionStorageは約5M、localStorageは約20M

4.文字列のみを保存でき、JSON.stringify（）をエンコードした後にオブジェクトを保存できます。

1.7.2.window.sessionStorage

1.ライフサイクルはブラウザウィンドウを閉じることです

2.同じウィンドウ（ページ）でデータを共有できます

3.キーと値のペアの形式で保存して使用します

データの保存：

sessionStorage.setItem(key, value)

データの取得：

sessionStorage.getItem(key)

データの削除：

sessionStorage.removeItem(key)

クリアデータ:(すべてクリア）

sessionStorage.clear()

1.7.3.window.localStorage

1.宣言期間は永続的に有効になり、手動で削除しない限り、閉じたページも存在します

2.複数のウィンドウ（ページ）を共有できます（同じブラウザを共有できます）

キーと値のペアの形式で保存および使用

データの保存：

localStorage.setItem(key, value)

データの取得：

localStorage.getItem(key)

データの削除：

localStorage.removeItem(key)

クリアデータ:(すべてクリア）

localStorage.clear()

1.7.4。ケース：ユーザー名を覚えておいてください

[ユーザー名を記憶する]をオンにすると、次にユーザーがブラウザを開いたときに、最後にログインしたユーザー名がテキストボックスに自動的に表示されます。

ケーススタディ

データを保存し、ローカルストレージを使用する
ページを閉じると、ユーザー名を表示することもできるので、localStorageが使用されます
ページを開き、最初にこのユーザー名があるかどうかを確認します。ある場合は、フォームにユーザー名を表示して、チェックボックスをオンにします。
チェックボックスが変更されたときの変更イベント
チェックされている場合は保存し、チェックされていない場合は削除します