Comparison and summary of the differences between mui page jump methods

This article mainly introduces the comparison of several mui page jump methods, creating subpages, opening new pages, and preloading pages. Friends in need can refer to it

[Several ways to open a page]

1. Create a subpage during initialization

2.Open a new page directly

3.Preload the page

[Example]

1. Create a subpage during initialization

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.Open a new page directly

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

[Some differences]

1. Subpages and non-subpages

Among the above three methods, the pages opened in 2 and 3 are non-subpages. Subpage,

The difference is that a subpage is equivalent to an iframe in html, while a non-subpage is equivalent to opening a new browser window and loading an html

2. Subpage Suitable for side-sliding menu

Subpages have their advantages, especially suitable for index.html+list.html.

If you use index.html (main page)+ If list.html (subpage) is implemented, the subpage will automatically follow when the main page slides to the right.

And if index.html (main page) + list.html (new page) is used, the main page will slide right Swipe, the new page does not slide right, and the new page must be processed separately.

3. Frequent switching of sub-pages

If you frequently swipe left and right, list.html will appear covering the index on mobile phones with lower configurations. In the case of html,

it won’t happen if you use sub-page mode, and the probability of using new page mode is very high.

4. Sub-pages are suitable for pull-down refresh and pull-up loading.

When doing large pull-down refresh before, the form of a new page was used,

According to the official website tutorial, no matter how I try it, it fails.

Later I looked at the source code and found that the pull-down refresh must be in the form of a sub-page.

That is, your list.html must be index .html subpages can be pulled down to refresh.

5. New page is suitable for new pages

Open a new page, suitable for viewing details and the like, when you need to open a new page,

And mui itself encapsulates the back method of the new page, so you don't need to worry about it.

6. Two ways to preload the page

The first is to preload during initialization,

This situation is suitable for you This page will not be used until a long time later.

If you want to go to the page immediately and use it, then you will get null.

The second method is similar to open.

Personally, there is not much difference.

The only difference is that open opens it directly.

preload is just loading, you can choose when to open it later.

7. Summary

If you need to pull down to refresh and pull up to load, please use a subpage.

If you need to open a new page, please use the new page method.

If you need to load a page but will not use it temporarily, please use the preloading method.

The above is the detailed content of Comparison and summary of the differences between mui page jump methods. For more information, please follow other related articles on the PHP Chinese website!