Web アプリとハイブリッド アプリの時代では、より良いユーザー エクスペリエンスを実現するために、シングル ページ アプリケーションが「SPA」、つまりシングル ページ アプリケーションと呼ばれるようになりました。は 1 つの HTML ページのみを持つアプリケーションであり、アプリケーション内のすべてのビューはこの HTML ページに含まれており、関連するビューの表示と非表示は JavaScript によって制御されます。このモードでは、ユーザーは Web でネイティブ アプリの速度とスムーズさを体験できます。アプリ。この記事の目的は、H5 単一ページ切り替えスケルトンをすばやく構築する方法を説明することです。
SPA アプリケーションを構築するときは、最初にアプリケーションにどのビューを含める必要があるかを決定する必要があります。ここでは、問題を説明するために、ホームページとリストの 3 つのビューのみを構築する必要があります。ページとリスト詳細ページ。 これら 3 つのページ間の論理関係は次のとおりです:
(1) プログラムが開始すると、デフォルトでホームページに入ります
(2) ホームページ上のボタンをクリックしてリスト ページに切り替えます
(3)一覧ページのボタンをクリックすると一覧詳細ページに切り替わります
(4)戻るボタンまたは物理リターンキーをクリックして前のページに戻ります。
まず、コア HTML コードを見てみましょう:
<body> <div class="pageview" style="background: #3b76c0" id="-main-view"> <h3>首页</h3> <div title="-list-view" class="right-arrow"></div> </div> <div class="pageview" style="background: #58c03b;display: none" id="-list-view"> <h3>列表页面</h3> <div class="left-arrow"></div> <div title="-detail-view" class="right-arrow"></div> </div> <div class="pageview" style="background: #c03b25;display: none" id="-detail-view"> <h3>列表详情页面</h3> <div class="left-arrow"></div> </div></body>
class=`pageview` を持つ div コンテナーには、本文にそのような div が 3 つ含まれていることに注意してください。 div はすべて style=`display:none` で設定されていますが、最初のビューは設定されていません。この目的は、プログラムの起動時にデフォルトでホームページを表示することです。
このコードでは、各ビューのスタイルと切り替え効果を記述するために共通の CSS クラスが使用されています。このクラスは `pageview` です。まず、ページビューがどのように定義されているかを見てみましょう。ビューをスムーズに切り替えるために、絶対位置と親コンテナと同じ幅と高さを設定する必要があります。また、ページ切り替えのトランジション効果を設定する必要があります。CSS3 の特定のパラメータを使用します。ここでは説明しませんが、誰もが理解できるはずです。このスタイル クラスによって生成される効果は次のとおりです。 -webkit-transform の値が変更されると、ページはスタイルで定義されたトランジション効果を使用して変換されます。これまでのところ、メイン ページのデザインは完了しています。 。
2. ロジック制御
.pageview{ position: absolute; left: 0; top:0; width: 100%; height: 100%; overflow: hidden; -webkit-transition: 0.4s ease-out -webkit-transform;}DOM クエリを減らすために、JS 操作を通じてページの DOM オブジェクトを取得する必要があることがわかりました。ページが読み込まれるときに、使用する必要があるすべてのページ オブジェクトを一度にクエリして保存します。 Map オブジェクトでは、キーと値のペアの形式で使用する必要があるため、キーに基づいて取得するだけで済みます。
//页面向左平移var currentViewStart = "translateX(0%)", //currentView初始位置 applyViewStart = "translateX(100%)", //applyView初始位置 currentViewEnd = "translateX(-100%)",//currentView的最终位置 applyViewEnd = "translateX(0%)"; //applyView最终位置//页面向右平移if (direction == "right") { currentViewStart = "translateX(0%)"; applyViewStart = "translateX(-100%)"; currentViewEnd = "translateX(100%)"; applyViewEnd = "translateX(0%)"}以下では、JS を使用してページの切り替え効果を制御します:
//初始化执行initViewPool:function(){ var views = document.querySelectorAll(".pageview"); //通过call使用数组的forEach来遍历NodeList Array.prototype.forEach.call(views,function(item){ //viewPool是一个全局对象 viewPool[item.id] = item; //将DOM的id作为键 });},ここで重要な操作は次のとおりです: 最終位置を設定する操作はタイマー、つまり t1 に配置する必要があります。初期位置を設定した後、このスタイルを「レンダリング」するには一定の時間がかかります。2 番目のタイマーは、現在のページの設定、ハッシュの設定、タイマーのクリアなどの関連操作を実行する前に、アニメーションが完了するまで待機します。等このコードを実行すると、設定した効果でページがスムーズに移動します。最後に、現在のページが非表示になり、新しいページで現在のページが画面の中央に表示されるように設定され、単一のページ切り替え効果が完成します。
3. 物理キーリターンのサポート
//获取当前页面的DOM对象var currentView = viewPool[currentViewId];//获取新页面的DOM对象var applyView = viewPool[pageId];//设置新页面的初始位置applyView.style.webkitTransform = applyViewStart;//设置当前页面的初始位置currentView.style.webkitTransform = currentViewStart;//设置新页面显示applyView.style.display = "";var t1 = setTimeout(function(){ //当设置最终位置时，页面就会以过渡效果平移到最终位置 applyView.style.webkitTransform = applyViewEnd; currentView.style.webkitTransform = currentViewEnd;},200);var t2 = setTimeout(function(){ //400ms后，页面平移结束，设置currentView为隐藏 currentView.style.display = "none"; //将新页面设置为当前页面 currentViewId = pageId; if (direction === 'left'){ window.location.hash = currentViewId.substring(1); } window.clearTimeout(t1); window.clearTimeout(t2);},600);ハッシュ変更の監視の処理:
if (direction === 'left'){ //当进入到新页面时，设置当前hash的值为当前页面的id window.location.hash = currentViewId.substring(1);}上記は、単一ページ切り替えの基本的な考え方です。対応する完全なサンプル コードは github: https://github.com/git-onepixel/h5spa にアップロードされています。デバッグと学習のために完全なコードをダウンロードできます。エフェクトのデモンストレーションを表示する必要がある場合は、クリックするか、WeChat を使用して以下の QR コードをスキャンしてアクセスしてください:
例は参照と学習のみを目的としており、他の目的にコピーしたり使用したりすることはできません。
by @一ピクセル ブログパーク 2016.01
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
