Comment optimiser la liste mui pour accéder à la page de détails

Étant donné que la page de liste vers la page de détails est dans un format plusieurs-à-un, c'est-à-dire que plusieurs listes de données sur la page de liste correspondent à une page de détails, mais les données sont différentes, par conséquent, la page de détails peut être ; préchargé lors du chargement de la page de liste, c'est-à-dire créer une vue Web de la page de détails, mais ne l'affiche pas Lorsque vous cliquez sur la liste, l'événement de la page de détails est déclenché via une méthode spécifique pour obtenir les données de réponse. peut réduire considérablement le temps de réponse.

Méthode de mise en œuvre

1. Chargez la page de détails à l'avance via le préchargement

2. mui.fire ; déclencheur Spécifiez les événements sur la page de détails et appelez ajax pour mettre à jour les données

Mise en œuvre du préchargement (deux méthodes) :

Adresse officielle

.

Première méthode de préchargement :

Configurez via le paramètre preloadPages dans la méthode mui.init.

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

En cours d'utilisation, vous ne pouvez pas utiliser autant d'attributs. Voici mon cas d'utilisation :

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

Il vous suffit de définir l'URL et l'identifiant. les paramètres requis pour la page de détails sont transmis lors de l'utilisation de mui.fire ;

Deuxième méthode de préchargement :

Préchargez via la méthode mui.preload.

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

Comparaison de deux méthodes de préchargement :

1. La méthode 1 crée une page préchargée de manière asynchrone, et peut créer plusieurs pages en même temps, mais comme elle est asynchrone, Par conséquent, l'objet Webview créé ne peut pas être obtenu immédiatement et plus.webview.getWebviewById doit être utilisé pour obtenir la vue Web créée ;
2. La méthode 2 consiste à créer de manière synchrone une page préchargée. La vue Web peut être obtenue de manière synchrone après la création. , c'est-à-dire la méthode 2. variable "page" ; mais la méthode 2 ne peut créer qu'une seule page préchargée en même temps

2. Déclenchez des événements personnalisés via mui.fire

Principe : deux vues Web existantes peuvent utiliser la méthode mui.fire pour déclencher un événement personnalisé dans une autre vue Web. Nous pouvons donc créer un événement personnalisé dans la page de détails et écouter la méthode mui.fire dans la page de liste.
mui.fire( target , event , data )
target : vue Web de la page de détails (page de détails préchargée dans la page de liste)
event : événement personnalisé surveillé dans la page de détails
data ; : Paramètres qui doivent être transmis à la page de détails ;

1. Créez et écoutez l'événement personnalisé "account_bid_detail_fire" sur la page de détails :

$.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 est transmis depuis la page de liste. Les paramètres sont tous dans event.detail, qui peuvent être affichés pour une visualisation détaillée

2. Déclenchez l'événement "account_bid_detail_fire" sur la page de liste :

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

Ensuite, lorsque vous cliquez sur la liste sur la page de liste, vous pouvez déclencher l'événement "account_bid_detail_fire" sur la page de détails, puis déclencher l'ajax sur la page de détails pour mettre à jour les données demandées

Avantages à la fin ; de l'article :

Avantage 1 : Front-end, Java, chef de produit, WeChat mini Une collection de programmes, Python et autres ressources gratuites : https://www.jianshu.com/p/e8197d4d9880

Avantage 2 : Un ensemble complet de didacticiels vidéo détaillés sur la prise en main des mini-programmes WeChat et en pratique : https://www.jianshu.com/p /e8197d4d9880

Recommandations associées :

Comparaison et résumé des différences entre le saut de page mui méthodes

Exemple de partage de l'implémentation MUI du chargement pull-up et de l'actualisation déroulante

mui js renvoie l'exemple de code de méthode pour actualiser le page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!