Mui 페이지 점프 방법

이번에는 mui 페이지 점프 방법을 알려드리겠습니다. 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. three 두 가지 방법에서 2와 3에서 열린 페이지는 하위 페이지가 아닙니다. 차이점은 하위 페이지는 HTML의 iframe과 동일하고, 비하위 페이지는 새 브라우저 창을 열고 html

을 로드하는 것과 같습니다.

2. 사이드 슬라이딩 메뉴에 적합한 페이지

서브 페이지의 장점이 있는데, 특히 index.html+list.html의 상황에 적합하며,

index.html(메인 페이지)로 구현하는 경우 +list.html(하위 페이지), 메인 페이지가 오른쪽으로 슬라이드되면 자동으로 하위 페이지가 따라옵니다.

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

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

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

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

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

이전에는 대규모 풀다운 새로고침을 할 때 새로운 페이지 형태를 사용했습니다.

튜토리얼, 어떻게 해봐도 실패했어요

나중에 보세요. 소스코드를 읽어보니 풀다운 새로고침이 반드시 서브페이지 형태여야 한다는 걸 알았습니다.

즉, your list.html 아래로 당겨서 새로 고치려면 index.html의 하위 페이지여야 합니다.

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

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

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

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

첫 번째는 초기화 시 미리 로드하는 것이고,

오랜만에 이 페이지를 사용하기에 적합한 상황입니다.

바로 페이지에 도착하여 사용하고 싶다면 , 그러면 null을 얻게 됩니다.

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

개인적으로는 별 차이가 없습니다.

open이 직접 여는 것만 다르고,

preload는 로딩일 뿐이고, 나중에 여는 시간을 선택할 수 있습니다.

7. 요약

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

필요한 경우 새 페이지 방법을 사용하세요. 페이지를 로드하고 일시적으로 사용하지 않으려면 사전 로드 방법을 사용하세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

재생, 일시 정지, 진행 드래그, 볼륨 조절 및 전체 화면이 가능한 H5 플레이어의 맞춤형 구현

H5에서 조각난 이미지 전환을 만드는 방법

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