ホームページ  >  記事  >  ウェブフロントエンド  >  Muiページジャンプ方法

Muiページジャンプ方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-27 09:38:084465ブラウズ

今回は、mui ページジャンプ方法について説明します。 ここでは、mui ページジャンプ方法を使用する際の 注意事項 について説明します。

【ページを開くいくつかの方法】

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

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

【例】

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

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: {} //额外扩展参数  
    }]  
});

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

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. 概要

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

再生、一時停止、ドラッグ進行、ボリュームコントロール、全画面表示が可能な H5 プレーヤーのカスタマイズされた実装

H5 で断片化された画像の切り替えを行う方法

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

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