Comparez et résumez les différences entre les méthodes de saut de page Mui

Cet article présente principalement la comparaison de plusieurs méthodes de saut de page mui, la création de sous-pages, l'ouverture de nouvelles pages et le préchargement de pages. Les amis dans le besoin peuvent s'y référer

【Plusieurs façons d'ouvrir une page. 】

1. Créer une sous-page lors de l'initialisation

2. Ouvrir directement une nouvelle page

3. [Exemple]

1. Créer une sous-page lors de l'initialisation

Ouvrir une nouvelle page directement Page

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

　

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. Page de préchargement

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

[Quelques différences]

1. Sous-pages et non-sous-pages

Parmi les trois méthodes ci-dessus, 2, 3 La page ouverte n'est pas une. sous-page, La différence est qu'une sous-page équivaut à une iframe en html, et une non-sous-page équivaut à ouvrir une nouvelle fenêtre de navigateur et à charger un html

2. . Les sous-pages conviennent aux menus coulissants latéraux

Les sous-pages ont leurs avantages, particulièrement adaptées à index.html+list.html Si vous utilisez index If. html (page principale) + list.html (sous-page) est implémenté, lorsque la page principale glisse vers la droite, la sous-page suivra automatiquement,

et utilisera index.html (page principale) + list. html (nouvelle page) Si implémenté, la page principale glissera vers la droite, mais la nouvelle page ne glissera pas vers la droite et la nouvelle page devra être traitée séparément.

3. Changement fréquent de sous-pages

Si vous balayez fréquemment vers la gauche et la droite, list.html apparaîtra couvrant l'index sur les téléphones avec des configurations inférieures. Dans le cas du HTML, ne fonctionnera pas si vous utilisez le mode sous-page, et la probabilité d'utiliser le mode nouvelle page est très élevée.

4. Les sous-pages conviennent à l'actualisation déroulante et au chargement pull-up

Lors d'un grand rafraîchissement déroulant auparavant, la forme d'une nouvelle page a été utilisé, En suivant le tutoriel sur le site officiel, il a échoué quoi qu'il arrive

Plus tard, j'ai regardé le code source et j'ai découvert que l'actualisation déroulante devait être sous la forme de. une sous-page,

c'est-à-dire que votre list.html doit être index. Les sous-pages .html peuvent être déroulées pour être actualisées.

5. Une nouvelle page convient à une nouvelle page

ouvrez une nouvelle page, adaptée à l'affichage des détails, etc., lorsque vous devez ouvrir une nouvelle page, Et mui lui-même encapsule la méthode back de la nouvelle page, vous n'avez donc pas à vous en soucier.

6. Deux façons de précharger la page

La première est de précharger lors de l'initialisation, Cette situation vous convient Cette page ne être utilisé longtemps plus tard

Si vous souhaitez accéder à la page immédiatement et l'utiliser, vous obtiendrez null.

La deuxième méthode est similaire à open

Personnellement, il n'y a pas beaucoup de différence

La seule différence est que open l'ouvre directement

. Le préchargement se charge simplement, vous pouvez choisir quand l'ouvrir plus tard.

7. Résumé

Si vous devez dérouler vers le bas pour actualiser et remonter pour charger, veuillez utiliser les sous-pages, Si vous devez ouvrir une nouvelle page, veuillez utiliser la méthode de nouvelle page,

Si vous devez charger une page mais que vous ne l'utilisez pas temporairement, veuillez utiliser la méthode de préchargement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!