세부 정보 페이지로 이동하기 위해 mui 목록을 최적화하는 방법

목록 페이지와 세부정보 페이지는 다대일 형식이므로, 즉 목록 페이지의 여러 데이터 목록이 하나의 세부정보 페이지에 해당하지만 데이터가 다르기 때문에 다음과 같은 경우 세부정보 페이지를 미리 로드할 수 있습니다. 목록 페이지 로드, 즉 세부정보 페이지의 웹뷰가 표시되지 않습니다. 목록을 클릭하면 특정 방법을 통해 세부정보 페이지의 이벤트가 트리거되어 응답 데이터를 크게 단축할 수 있습니다. 응답 시간.

구현 방법

1. 미리 로드하여 세부정보 페이지를 미리 로드합니다.

2. mui.fire는 세부정보 페이지에서 지정된 이벤트를 트리거하고 ajax를 호출하여 데이터를 업데이트합니다. 사전 로드 방법(두 가지 유형) 방법):

공식 주소

사전 로드 방법 1:

mui.init 메서드의 preloadPages 매개 변수를 통해 구성합니다.

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制});

사용 중에는 너무 많은 속성을 사용하지 않을 수 있습니다. 제 사용 사례는 다음과 같습니다.

mui.init({    preloadPages: [{
        url: 'account_detail.html',
        id: 'account_detail.html'
    }]
});

세부 정보 페이지에 필요한 매개변수는 mui.fire를 사용할 때 전달됩니다.

미리 로드 방법 2:

mui.preload 방법을 통해 미리 로드합니다.

var page = mui.preload({    url:new-page-url,    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数});

두 가지 프리로드 방법 비교:

1. 첫 번째 방법은 프리로드된 페이지를 비동기식으로 생성하는 것으로, 동시에 여러 페이지를 생성할 수 있지만, 비동기식이기 때문에 생성된 웹뷰 객체를 바로 얻을 수는 없습니다. 생성된 webview를 얻으려면 plus.webview.getWebviewById를 사용해야 합니다.

2. 방법 2는 생성 후 동기적으로 webview를 생성하는 것입니다. 즉, 방법 2의 "페이지" 변수입니다. 방법 2는 동시에만 생성할 수 있습니다.

2. mui.fire를 통해 사용자 정의 이벤트를 트리거합니다.

원리: 동시에 존재하는 두 개의 웹뷰는 사용자 정의 이벤트를 트리거하기 위해 mui.fire를 사용할 수 있습니다. 따라서 세부정보 페이지에서 맞춤 이벤트를 생성하고 목록 페이지에서 mui.fire 메서드를 들을 수 있습니다.
mui.fire( target , event , data )

target: 세부정보 페이지의 웹뷰(목록 페이지에 미리 로드된 세부정보 페이지)

event: 세부정보 페이지에서 모니터링되는 맞춤 이벤트

data: 매개변수

1. 세부정보 페이지에서 사용자 정의 이벤트 "account_bid_detail_fire"를 생성하고 수신합니다.

$.plusReady(function() {            /**
             * 实例化获取接口数据方法
             */
            var get_bid_detail = new GET_BID_DETAIL();            window.addEventListener('account_bid_detail_fire', function(event) {                //获得事件参数
                var id = event.detail.id;                    console.log(JSON.stringify(event.detail));                //触发ajax，根据id向服务器请求当前列表详情
                get_bid_detail.init(id);
            });
        });

mui.fire 목록 페이지에서 전달된 매개변수는 모두 event.detail에 있습니다.

2. 목록에서 해당 페이지는 "account_bid_detail_fire" 이벤트를 트리거합니다.

mui(document.body).on("tap", ".account_bid_list", function() {//触发详情页面的account_bid_detail_fire事件
    var detail_webview = null;    if(!detail_webview) {        //判断webview是否存在
        detail_webview = plus.webview.getWebviewById("account_detail.html");
     }    //detail_webview是在列表页中预加载的页面；
    mui.fire(detail_webview, 'account_bid_detail_fire', {        id: _this.dataset.id
    });    //打开详情页面          
    mui.openWindow({       id: "account_detail.html",//详情页webview的id
       show: {           aniShow: 'none', //页面不显示动画
           duration: '0' //
        }
    });
});

다음으로 목록 페이지에서 목록을 클릭하면 세부정보 페이지에서 "account_bid_detail_fire" 이벤트를 트리거할 수 있습니다. 그런 다음 세부 정보 페이지에서 Ajax를 실행하여 요청된 데이터를 업데이트합니다.

기사 끝 부분의 혜택:

보너스 1: 프런트 엔드, Java, 제품 관리자, WeChat 미니 프로그램, Python 및 기타의 포괄적인 컬렉션입니다. 리소스: https://www.jianshu.com/p/e8197d4d9880

이점 2: WeChat 미니 프로그램 시작 및 실습에 대한 자세한 비디오 튜토리얼 전체 세트: https://www.jianshu.com/p/e8197d4d9880 ㅋㅋㅋ

페이지 새로고침을 위한 mui js 반환 방법 예제 코드

위 내용은 세부 정보 페이지로 이동하기 위해 mui 목록을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!