ホームページ ウェブフロントエンド H5 チュートリアル mui ページジャンプ方法の違いを比較してまとめます

mui ページジャンプ方法の違いを比較してまとめます

Aug 22, 2017 pm 05:31 PM
方法 ページ

この記事では、主にいくつかの mui ページジャンプ方法、サブページの作成、新しいページを開く方法、ページのプリロード方法の比較を紹介します。初期化中にサブページを作成します

2. 新しいページを直接開きます3. ページをプリロードします

1. 初期化中にサブページを作成します

2. 新しいページを直接開きます

mui.init({  
    subpages: [{  
        url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址  
        id: your - subpage - id, //子页面标志  
        styles: {  
            top: subpage - top - position, //子页面顶部位置  
            bottom: subpage - bottom - position, //子页面底部位置  
            width: subpage - width, //子页面宽度,默认为100%  
            height: subpage - height, //子页面高度,默认为100%  
            ......  
        },  
        extras: {} //额外扩展参数  
    }]  
});
ログイン後にコピー

3. プリロードページ

mui.openWindow({  
    url: new - page - url,  
    id: new - page - id,  
    styles: {  
        top: newpage - top - position, //新页面顶部位置  
        bottom: newage - bottom - position, //新页面底部位置  
        width: newpage - width, //新页面宽度,默认为100%  
        height: newpage - height, //新页面高度,默认为100%  
        ......  
    },  
    extras: {  
        ..... //自定义扩展参数,可以用来处理页面间传值  
    }  
    show: {  
        autoShow: true, //页面loaded事件发生后自动显示,默认为true  
        aniShow: animationType, //页面显示动画,默认为”slide-in-right“;  
        duration: animationTime //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;  
    },  
    waiting: {  
        autoShow: true, //自动显示等待框,默认为true  
        title: '正在加载...', //等待对话框上显示的提示内容  
        options: {  
            width: waiting - dialog - widht, //等待框背景区域宽度,默认根据内容自动计算合适宽度  
            height: waiting - dialog - height, //等待框背景区域高度,默认根据内容自动计算合适高度  
            ......  
        }  
    }  
})
ログイン後にコピー



【いくつかの違い】

1. 上記の3種類のメソッドです。 、で開かれたページ2 と 3 はサブページではありません。違いは、サブページは HTML の iframe に相当し、非サブページは新しいブラウザー ウィンドウを開いて HTML をロードすることに相当します。 2. サブページ サイドスライド メニューに適しています



サブページにはそれぞれの利点があり、特にindex.html+list.htmlの状況に適しています。

index.html(メインページ)+list.html(サブページ)で実装されている場合、メインページの場合右にスライドすると、サブページが自動的に追従しますそして、index.html (メインページ) + list.html (新しいページ) で実装されている場合、メインページは右にスライドしますが、新しいページは右にスライドしません。 、新しいページは個別に処理する必要があります。

3. サブページの頻繁な切り替え

頻繁に左右にスワイプすると、低い設定の携帯電話では list.html が Index.html をカバーします。

サブページ モードを使用すると、はい、新しいページ モードを使用する可能性が高くなります。

4. サブページはプルダウン更新とプルアップ読み込みに適しています

以前に大規模なプルダウン更新を行ったときは、

公式ウェブサイトに従ってください。チュートリアル、どうやっても動きませんでした

後で見てください ソースコードを読んだ後、プルダウンの更新はサブページの形式である必要があることがわかりました、

つまり list.html である必要があります。プルダウンして更新する前に、index.html のサブページである必要があります。

5. 新しいページは新しいページに適しています

新しいページを開く必要がある場合、詳細を表示するのに適した新しいページを開きます

そして、mui 自体が新しいページの back メソッドをカプセル化します。 、心配する必要はありません。

6. ページをプリロードする 2 つの方法

1 つ目は、初期化中にプリロードすることです。

この状況は、このページを久しぶりに使用するのに適しています。

すぐにページにアクセスして使用したい場合は、 、その場合、nullが返されます。

2 番目の方法は open と似ています 個人的には、大きな違いはありません

唯一の違いは、open は直接開くのに対し、

preload はロードするだけであり、後で開く時間を選択できることです。

7. 概要

プルダウンして更新し、プルアップしてロードする必要がある場合は、サブページを使用してください。

新しいページを開く必要がある場合は、新しいページの方法を使用してください。ページをロードするが、一時的に使用されない場合は、プリロード方法を使用してください。

以上がmui ページジャンプ方法の違いを比較してまとめますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Wordでページをコピーする方法 Wordでページをコピーする方法 Feb 20, 2024 am 10:09 AM

Microsoft Word でページをコピーし、書式設定をそのまま維持したいですか? Word でページを複製すると、特定の文書レイアウトまたは形式のコピーを複数作成する場合に時間の節約に役立つため、これは賢明なアイデアです。このガイドでは、テンプレートを作成する場合でも、文書内の特定のページをコピーする場合でも、Word でページをコピーする手順を段階的に説明します。これらの簡単な手順は、最初から始めなくてもページを簡単に再作成できるように設計されています。 Microsoft Word でページをコピーする必要があるのですか? Word でページをコピーすることが非常に有益である理由はいくつかあります。 特定のレイアウトまたは形式の文書をコピーしたい場合。ページ全体を最初から再作成するのとは異なります

iPhone のスタンバイ モードをカスタマイズおよび編集する方法: iOS 17 の新機能 iPhone のスタンバイ モードをカスタマイズおよび編集する方法: iOS 17 の新機能 Sep 21, 2023 pm 04:01 PM

スタンバイは iOS 17 アップデートの新機能で、携帯電話がアイドル状態のときにすぐに情報にアクセスするための新しく強化された方法を提供します。 StandBy を使用すると、時間を確認したり、今後のイベントを表示したり、カレンダーを参照したり、現在地の天気予報の最新情報を入手したりすることができます。起動すると、充電中に横向きに設定すると、iPhone が直感的にスタンバイ モードに入ります。この機能は、ベッドサイドテーブルなどのワイヤレス充電ポイント、または日常業務中に iPhone の充電から離れているときに最適です。スタンバイ中に表示されるさまざまなウィジェットをスワイプすることで、さまざまなアプリのさまざまな情報にアクセスできます。ただし、好みや頻繁に必要な情報に基づいて、これらのウィジェットを変更したり、一部を削除したりすることもできます。それでは、詳しく見ていきましょう

Web ページをすばやく更新するにはどうすればよいですか? Web ページをすばやく更新するにはどうすればよいですか? Feb 18, 2024 pm 01:14 PM

ネットワークを日常的に使用する中でページの更新は頻繁に行われますが、Web ページにアクセスすると、Web ページが読み込まれない、表示が異常になるなどの問題が発生することがあります。現時点では、通常、問題を解決するためにページを更新することを選択しますが、ページを素早く更新するにはどうすればよいでしょうか?ページ更新のショートカット キーについて説明します。ページ更新ショートカットキーは、キーボード操作で現在のWebページを素早く更新する方法です。オペレーティング システムやブラウザが異なると、ページを更新するためのショートカット キーが異なる場合があります。以下では一般的な W を使用します。

iPhoneのホーム画面ページを並べ替え、無効化、削除する方法 iPhoneのホーム画面ページを並べ替え、無効化、削除する方法 Nov 29, 2023 am 08:22 AM

iOS では、Apple は iPhone の個々のホーム画面ページを無効にすることを許可しています。ホーム画面のページを無効にするだけでなく、ホーム画面のページの順序を並べ替えたり、ページを直接削除したりすることもできます。仕組みは次のとおりです。ホーム画面のページを並べ替える方法 ホーム画面でスペースをタッチしたままにして、ジッター モードに入ります。ホーム画面ページを表す点の列をタップします。表示されるホーム画面のグリッドで、ページをタッチしてドラッグし、他のページとの相対的な位置を再配置します。ドラッグに応じて他のものも動きます。新しい配置に満足したら、画面の右上隅にある「完了」をタップし、もう一度「完了」をタップしてディザモードを終了します。ホーム画面ページを無効化または削除する方法 ホーム画面でスペースを押したままにして、ディザ モードに入ります。タップしてホーム画面を表示します

3 秒でページジャンプを実装する方法: PHP プログラミングガイド 3 秒でページジャンプを実装する方法: PHP プログラミングガイド Mar 25, 2024 am 10:42 AM

タイトル: 3秒でできるページジャンプの実装方法: PHPプログラミングガイド Web開発においてページジャンプは一般的な操作ですが、通常はHTMLやJavaScriptのメソッド内のメタタグを使ってページにジャンプします。ただし、特定のケースでは、サーバー側でページ ジャンプを実行する必要があります。この記事では、PHPプログラミングを使用して、3秒以内に指定したページに自動でジャンプする機能を実装する方法と、具体的なコード例を紹介します。 PHP を使用したページジャンプの基本原理 PHP は一種の

LaravelページでCSSが正しく表示されない場合の対処方法 LaravelページでCSSが正しく表示されない場合の対処方法 Mar 10, 2024 am 11:33 AM

「CSS を正しく表示できない Laravel ページを処理する方法、特定のコード例が必要」 Laravel フレームワークを使用して Web アプリケーションを開発する場合、ページで CSS スタイルを正しく表示できず、ページのレンダリングが異常になるという問題が発生することがあります。スタイル。ユーザー エクスペリエンスに影響します。この記事では、Laravel ページで CSS が正しく表示されない場合に対処するいくつかの方法を紹介し、開発者がこの一般的な問題を解決するのに役立つ具体的なコード例を示します。 1. ファイルパスを確認する まずCSSファイルのパスを確認します。

ThinkPHP6 を使用して美しい 404 ページを実装する ThinkPHP6 を使用して美しい 404 ページを実装する Jun 20, 2023 am 11:06 AM

インターネットの発展に伴い、多くの Web サイトやアプリケーションは徐々に複雑になってきました。ユーザーがそれを使用すると、エラー ページが頻繁に表示されます。その中で最も一般的なのは 404 ページです。 404 ページは、アクセスされているページが存在しないことを意味し、一般的なエラー ページです。 Web サイトやアプリケーションの場合、美しい 404 ページはユーザー エクスペリエンスを大幅に向上させます。この記事では、ThinkPHP6を使って美しい404ページを素早く実装する方法を紹介します。ルートを作成する まず、ルート フォルダーにエラーを作成する必要があります。

Word でコンテンツのページを削除する方法の紹介 Word でコンテンツのページを削除する方法の紹介 Mar 26, 2024 am 10:06 AM

タイトル: Word でコンテンツのページを削除する方法の紹介 Microsoft Word を使用して文書を編集しているときに、空白のページや不要なコンテンツを削除する必要がある場合があります。文書内の特定のページにあります。この状況に対応して、コンテンツのページを迅速かつ効果的に削除するいくつかの方法を講じることができます。次に、Microsoft Word でコンテンツのページを削除するいくつかの方法を紹介します。方法 1: コンテンツのページを削除する まず、編集する必要がある Word 文書を開きます。確かに

See all articles