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

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

巴扎黑
リリース: 2017-08-22 17:31:00
オリジナル
2207 人が閲覧しました

この記事では、主にいくつかの 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート