mui 페이지 점프 방법의 차이점 비교 및 ​​요약

이 글에서는 주로 여러 가지 페이지 이동 방법, 하위 페이지 만들기, 새 페이지 열기, 페이지 미리 로드에 대한 비교를 소개합니다. 필요한 친구가 참고할 수 있습니다.

[여러 가지 페이지 열기 방법]

1. 초기화 중 서브 페이지

2. 새 페이지를 직접 엽니다

3. 페이지를 미리 로드합니다

【예시】

1. 초기화 중 서브 페이지를 생성합니다

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.

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. 페이지 프리로드

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

　　

【일부 차이점】

1. 위의 세 가지 유형의 방법에서는 페이지가 다음 형식으로 열립니다. 2와 3은 하위 페이지가 아니며, 하위 페이지는 HTML의 iframe과 동일하며, 비하위 페이지는 새 브라우저 창을 열고 HTML을 로드하는 것과 동일합니다. 2. 하위 페이지 사이드 슬라이딩 메뉴에 적합합니다.

하위 페이지에는 장점이 있는데 특히 index.html+list.html 상황에 적합합니다.index.html(메인 페이지)+list.html(하위 페이지)로 구현하면 메인 페이지가

그리고 index.html(메인 페이지) + list.html(새 페이지)로 구현하면 메인 페이지는 오른쪽으로 슬라이드되지만, 새 페이지는 오른쪽으로 슬라이드되지 않습니다. , 새 페이지는 별도로 처리되어야 합니다.

3. 하위 페이지가 자주 전환됩니다.

좌우로 자주 스와이프하면 구성이 낮은 휴대폰에서는 list.html이 index.html을 덮습니다.

하위 페이지 모드를 사용하면 그렇지 않습니다. 새 페이지 모드를 사용할 가능성이 높습니다.

4. 하위 페이지는 풀다운 새로고침과 풀업 로딩에 적합합니다.

이전에는 대규모 풀다운 새로고침을 할 때 새로운 페이지 형태를 사용했습니다. 튜토리얼, 아무리해도 작동하지 않았습니다.

나중에 살펴보세요. 소스 코드를 읽은 후 풀다운 새로 고침이 반드시 하위 페이지 형식이어야 한다는 것을 알았습니다.

즉, list.html이 있어야 합니다. 아래로 당겨 새로고침하기 전에 index.html의 하위 페이지여야 합니다.

5. 새 페이지는 새 페이지에 적합합니다.

새 페이지를 열어야 하는 경우 세부 정보 등을 보는 데 적합합니다.

그리고 mui 자체가 새 페이지의 back 메서드를 캡슐화합니다. , 걱정할 필요가 없습니다.

6. 페이지를 미리 로드하는 두 가지 방법

첫 번째는 초기화 시 미리 로드하는 것이고, 오랜만에 이 페이지를 사용하기에 적합한 상황입니다.

바로 페이지에 도착하여 사용하고 싶다면 , 그러면 null이 발생합니다.

두 번째 방법은 open과 비슷합니다.

개인적으로는 큰 차이가 없습니다. open이 직접 열고,

preload만 로드하고, 나중에 여는 타이밍을 선택할 수 있다는 점입니다.

7. 요약

새 페이지를 열어야 하는 경우 하위 페이지를 사용하세요.

필요한 경우. 페이지를 로딩하고 싶지만 일시적으로 사용하지 않는 경우, 프리로딩 방식을 이용해 주시기 바랍니다.

위 내용은 mui 페이지 점프 방법의 차이점 비교 및 ​​요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!