Vergleichen und fassen Sie die Unterschiede zwischen den MUI-Seitensprungmethoden zusammen-H5-Tutorial-php.cn

Vergleichen und fassen Sie die Unterschiede zwischen den MUI-Seitensprungmethoden zusammen

巴扎黑

Freigeben： 2017-08-22 17:31:00

Original

2207 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Vergleich mehrerer Mui-Seitensprungmethoden, das Erstellen von Unterseiten, das Öffnen neuer Seiten und das Vorladen von Seiten vorgestellt.

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

1. Erstellen Sie eine Unterseite während der Initialisierung

2. Öffnen Sie direkt eine neue Seite

3 [Beispiel]

1. Erstellen Sie während der Initialisierung eine Unterseite

2. Öffnen Sie direkt eine neue Seite

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

Nach dem Login kopieren

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: &#39;正在加载...&#39;, //等待对话框上显示的提示内容  
        options: {  
            width: waiting - dialog - widht, //等待框背景区域宽度，默认根据内容自动计算合适宽度  
            height: waiting - dialog - height, //等待框背景区域高度，默认根据内容自动计算合适高度  
            ......  
        }  
    }  
})

Nach dem Login kopieren

3. Seite vorladen

// 方式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: {} //自定义扩展参数  
});

Nach dem Login kopieren

[Einige Unterschiede]

1. Unterseiten und Nicht-Unterseiten

Unter den oben genannten drei Methoden ist 2 , 3 Die geöffnete Seite ist keine Unterseite,

Der Unterschied besteht darin, dass eine Unterseite einem Iframe in HTML entspricht und 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 Vorteile, besonders geeignet für index.html+list.html

Wenn Sie index.html verwenden html (Hauptseite) + list.html (Unterseite) ist implementiert. Wenn die Hauptseite nach rechts verschoben wird, folgt automatisch die Unterseite

und verwendet index.html (Hauptseite) + Liste. html (neue Seite) Wenn implementiert, wird die Hauptseite nach rechts verschoben, die neue Seite jedoch nicht nach rechts und die neue Seite muss separat verarbeitet werden.

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.

Das obige ist der detaillierte Inhalt vonVergleichen und fassen Sie die Unterschiede zwischen den MUI-Seitensprungmethoden zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!