Mui-Seitensprungmethode

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung der Mui-Seitensprungmethode vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

【Mehrere Möglichkeiten, eine Seite zu öffnen】

1. Erstellen Sie während der Initialisierung eine Unterseite

Öffnen Sie direkt eine neue Seite

3. Seite vorab laden

[Beispiel]

1. Erstellen Sie eine Unterseite während der Initialisierung

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. Öffnen Sie direkt eine neue Seite

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, //等待框背景区域高度，默认根据内容自动计算合适高度  
            ......  
        }  
    }  
})

3. Laden Sie die Seite vor

// 方式1  
mui.init({  
    preloadPages: [{  
        url: prelaod - page - url,  
        id: preload - page - id,  
        styles: {}, //窗口参数  
        extras: {}, //自定义扩展参数  
        subpages: [{}, {}] //预加载页面的子页面  
    }]  
});  
   
// 方式2  
var page = mui.preload({  
    url: new - page - url,  
    id: new - page - id, //默认使用当前页面的url作为id  
    styles: {}, //窗口参数  
    extras: {} //自定义扩展参数  
});

[Einige Unterschiede]

1. Unterseiten und Nicht-Unterseiten

Unter den oben genannten drei Methoden sind die in 2 und 3 geöffneten Seiten keine Unterseiten Der Unterschied besteht darin, dass eine Unterseite einem Iframe in HTML entspricht, während eine Nicht-Unterseite dem Öffnen eines neuen Browserfensters und dem Laden eines HTML entspricht

2. Unterseiten eignen sich für seitlich verschiebbare Menüs

Unterseiten haben ihre eigenen Vorteile, besonders geeignet für die Situation von index.html+list.html

Wenn sie mit index.html (Hauptseite) + list.html (Unterseite) implementiert werden. , wenn die Hauptseite Wenn die Seite nach rechts gleitet, folgt automatisch die Unterseite,

und wenn es mit index.html (Hauptseite) + list.html (neue Seite) implementiert wird, die Hauptseite wird nach rechts verschoben, aber die neue Seite lässt sich nicht nach rechts verschieben und muss getrennt werden. Verarbeiten Sie die neue Seite.

3. Häufiges Wechseln der Unterseiten

Wenn Sie häufig nach links und rechts wischen, wird list.html auf Telefonen mit niedrigeren Konfigurationen angezeigt Bei HTML funktioniert

nicht, wenn Sie den Unterseitenmodus verwenden, und die Wahrscheinlichkeit, dass Sie den neuen Seitenmodus verwenden, ist sehr hoch.

4. Unterseiten eignen sich für die Pull-Down-Aktualisierung und das Pull-Up-Laden

Bei der großen Pull-Down-Aktualisierung vor der Form einer neuen Seite wurde verwendet,

Nachdem ich dem Tutorial auf der offiziellen Website gefolgt bin, ist es auf jeden Fall fehlgeschlagen

Später habe ich mir den Quellcode angesehen und festgestellt, dass die Pulldown-Aktualisierung in der Form vorliegen muss eine Unterseite,

das heißt, Ihre list.html muss index.html sein. Unterseiten können zum Aktualisieren nach unten gezogen werden.

5. Neue Seite eignet sich für neue Seite

Öffnen Sie eine neue Seite, geeignet zum Anzeigen von Details und dergleichen, wenn Sie eine neue Seite öffnen müssen,

Und Mui selbst kapselt die Back-Methode der neuen Seite, sodass Sie sich darüber keine Sorgen machen müssen.

Zwei Möglichkeiten, die Seite vorab zu laden

Die erste besteht darin, sie während der Initialisierung vorzuladen.

Diese Situation ist für Sie geeignet. Diese Seite ist nicht geeignet

Wenn Sie die Seite sofort aufrufen und verwenden möchten, erhalten Sie null.

Die zweite Methode ähnelt open.

Für mich gibt es keinen großen Unterschied.

Der einzige Unterschied besteht darin, dass open sie direkt öffnet Preload wird nur geladen. Sie können auswählen, wann Sie es später öffnen möchten.

7. Zusammenfassung

Wenn Sie zum Aktualisieren nach unten und zum Laden nach oben ziehen müssen, verwenden Sie bitte Unterseiten.

Wenn Sie sie öffnen müssen Um eine neue Seite zu erstellen, verwenden Sie bitte die neue Seitenmethode.

Wenn Sie eine Seite laden müssen, diese aber vorübergehend nicht verwenden möchten, verwenden Sie bitte die Vorlademethode.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Angepasste Implementierung des H5-Players, der Wiedergabepause, Fortschrittsanzeige, Lautstärkeregelung und Vollbildmodus ermöglicht

Wie man fragmentierte Bildwechsel in H5 durchführt

Das obige ist der detaillierte Inhalt vonMui-Seitensprungmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!