mui リストを最適化して詳細ページに移動する方法

リストページから詳細ページは多対一形式であるため、つまり、リストページ上の複数のデータリストが 1 つの詳細ページに対応しますが、データは異なるため、次の場合に詳細ページをプリロードできます。リスト ページの読み込み (つまり、作成) 詳細ページの Web ビューは表示されません。リストがクリックされると、応答データを取得するための特定のメソッドを通じて詳細ページのイベントがトリガーされます。反応時間。

実装方法

1. プリロードを通じて事前に詳細ページをロードします。

2. mui.fireは詳細ページで指定されたイベントをトリガーし、ajaxを呼び出してデータを更新します。プリロード方法 (2 種類) 方法):

公式アドレス

プリロード方法 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:{}//自定义扩展参数});

プリロードの 2 つの方法の比較:

1. 方法 1 は、プリロードされたページを非同期で作成することであり、複数のページを同時に作成できます。ただし、非同期であるため、作成された Webview オブジェクトをすぐに取得することはできません。作成された Webview を取得するには、plus.webview.getWebviewById を使用する必要があります。

2. 方法 2 は、作成後に Webview を同期的に取得できます。メソッド 2 は、同時に作成できるのはプリロードされたページだけです。

2. mui.fire を通じてカスタム イベントをトリガーします

原則: 同時に存在する 2 つの Web ビューは、mui.fire メソッドを使用してカスタム イベントをトリガーできます。したがって、詳細ページでカスタム イベントを作成し、リスト ページで mui.fire メソッドをリッスンできます。
mui.fire( target , event , data )

target: 詳細ページの Web ビュー (リスト ページにプリロードされた詳細ページ)

event: 詳細ページで監視されるカスタム イベント;詳細ページに渡されるパラメータ;

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 ページジャンプ方法の違いの比較まとめ

MUI の実装 プルロードとプルダウンリフレッシュの例の共有

むいページを更新するための js return メソッドのサンプルコード

以上がmui リストを最適化して詳細ページに移動する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。