Mui page jump method

This time I will bring you the mui page jump method. What are the precautions when using the mui page jump method. The following is a practical case, let’s take a look.

[Several ways to open a page]

1. Create a subpage during initialization

2.Open a new page directly

3. Preload 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 the 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 not subpages.

The difference is that subpages are equivalent to those in html The iframe instead of the subpage is equivalent to opening a new browser window and loading an html

2. The subpage is suitable for the side sliding menu

The subpage has It has some advantages, especially suitable for the situation of index.html+list.html.

If it is implemented with index.html (main page) + list.html (sub-page), when the main page slides right, the sub-page It will follow automatically.

If implemented with index.html (main page) + list.html (new page), the main page will slide right, but the new page will 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Customized implementation of H5 player that can play pause, progress drag, volume control and full screen

##H5How to make fragmented picture switching

The above is the detailed content of Mui page jump method. For more information, please follow other related articles on the PHP Chinese website!