So optimieren Sie die Mui-Liste, um zur Detailseite zu springen

Da die Listenseite zur Detailseite ein Viele-zu-Eins-Format hat, d. h. mehrere Datenlisten auf der Listenseite einer Detailseite entsprechen, die Daten jedoch unterschiedlich sind, kann die Detailseite unterschiedlich sein Beim Laden der Listenseite vorinstalliert, d. h. eine Webansicht der Detailseite erstellen, diese jedoch nicht anzeigen. Wenn auf die Liste geklickt wird, wird das Ereignis der Detailseite durch eine bestimmte Methode zum Abrufen der Antwortdaten ausgelöst kann die Reaktionszeit erheblich verkürzen.

Implementierungsmethode

1. Laden Sie die Detailseite im Voraus durch Vorladen

2. mui.fire Auslöser Geben Sie Ereignisse auf der Detailseite an und rufen Sie Ajax auf, um Daten zu aktualisieren.

1. Implementierung des Vorladens (zwei Methoden):

Offizielle Adresse

Methode eins vorab laden:

Konfigurieren Sie über den preloadPages-Parameter in der mui.init-Methode.

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

Im Gebrauch können Sie nicht so viele Attribute verwenden. Das Folgende ist mein Anwendungsfall:

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

Sie müssen nur die URL und die ID festlegen Parameter, die für die Detailseite erforderlich sind, werden bei Verwendung von mui.fire übergeben.

Methode zwei vorab laden:

Vorladen über die Methode mui.preload.

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

Vergleich zweier Vorlademethoden:

1. Methode 1 erstellt eine vorab geladene Seite asynchron und kann mehrere Seiten gleichzeitig erstellen, aber da sie asynchron ist, Daher kann das erstellte Webview-Objekt nicht sofort abgerufen werden und es muss plus.webview.getWebviewById verwendet werden, um die erstellte Webview abzurufen.
2. Methode 2 besteht darin, eine vorinstallierte Seite synchron zu erstellen. Die Webview kann synchron nach der Erstellung abgerufen werden , also Methode 2. „Seite“-Variable; aber Methode 2 kann nur eine vorinstallierte Seite gleichzeitig erstellen

2. Benutzerdefinierte Ereignisse über mui.fire auslösen

Prinzip: Zwei vorhandene Webansichten können die Methode mui.fire verwenden, um ein benutzerdefiniertes Ereignis in einer anderen Webansicht auszulösen. Daher können wir ein benutzerdefiniertes Ereignis auf der Detailseite erstellen und die Methode mui.fire auf der Listenseite abhören.
mui.fire( target , event , data )
target: Webansicht der Detailseite (Detailseite auf der Listenseite vorinstalliert);
event: benutzerdefiniertes Ereignis, das auf der Detailseite überwacht wird; : Parameter, die an die Detailseite übergeben werden müssen;

1. Erstellen und hören Sie das benutzerdefinierte Ereignis „account_bid_detail_fire“ auf der Detailseite:

$.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 wird von der Listenseite übergeben. Die Parameter befinden sich alle in event.detail, die zur detaillierten Anzeige ausgegeben werden können

2. Lösen Sie das Ereignis „account_bid_detail_fire“ auf der Listenseite aus:

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' //
        }
    });
});

Als nächstes, wenn Sie auf der Listenseite auf die Liste klicken, können Sie das Ereignis „account_bid_detail_fire“ auf der Detailseite auslösen und dann den Ajax auf der Detailseite auslösen, um die angeforderten Daten zu aktualisieren.

Vorteile am Ende des Artikels:

Vorteil 1: Frontend, Java, Produktmanager, WeChat mini Eine große Sammlung von Programmen, Python und anderen Ressourcen: https://www.jianshu.com/p/e8197d4d9880

Vorteil 2: Ein vollständiger Satz detaillierter Video-Tutorials zum Einstieg in die WeChat-Miniprogramme und in der Praxis: https://www.jianshu.com/p /e8197d4d9880

Verwandte Empfehlungen:

Vergleich und Zusammenfassung der Unterschiede zwischen Mui-Seitensprungmethoden

Beispielfreigabe der MUI-Implementierung von Pull-up-Laden und Pull-down-Aktualisierung

mui js gibt den Methodenbeispielcode zum Aktualisieren der Seite zurück

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die Mui-Liste, um zur Detailseite zu springen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!