Méthode de saut de page Mui

Cette fois, je vais vous présenter la méthode de saut de page mui. Quelles sont les précautions lors de l'utilisation de la méthode de saut de page mui. Ce qui suit est un cas pratique, jetons un coup d'œil.

【Plusieurs façons d'ouvrir une page】

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

2. Ouvrir directement une nouvelle page

3. Page de préchargement

[Exemple]

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

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. Ouvrir directement une nouvelle page

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. Précharger la page

// 方式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, les pages ouvertes en 2 et 3 ne sont pas des sous-pages

La. la différence est qu'une sous-page équivaut à une iframe en HTML, tandis qu'une non-sous-page équivaut à ouvrir une nouvelle fenêtre de navigateur et à charger un code HTML

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

Les sous-pages ont leurs propres avantages, particulièrement adaptées à la situation de index.html+list.html

Si elles sont implémentées avec index.html (page principale) + list.html (sous-page). , lorsque la page principale Lorsque la page glisse vers la droite, la sous-page suivra automatiquement,

et si elle est implémentée avec index.html (page principale) + list.html (nouvelle page), la page principale glissera vers la droite, mais la nouvelle page ne glissera pas vers la droite et elle devra être séparée. Traitez la nouvelle page.

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 est en train de se charger, 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation personnalisée du lecteur H5 qui peut lire la pause, la progression, le contrôle du volume et le plein écran

Comment effectuer un changement d'image fragmentée dans H5

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!