ホームページ > 記事 > ウェブフロントエンド > mui リストを最適化して詳細ページに移動する方法
リストページから詳細ページは多対一形式であるため、つまり、リストページ上の複数のデータリストが 1 つの詳細ページに対応しますが、データは異なるため、次の場合に詳細ページをプリロードできます。リスト ページの読み込み (つまり、作成) 詳細ページの Web ビューは表示されません。リストがクリックされると、応答データを取得するための特定のメソッドを通じて詳細ページのイベントがトリガーされます。反応時間。
プリロード方法 1:
プリロードを通じて事前に詳細ページをロードします。
- 公式アドレス
mui.fireは詳細ページで指定されたイベントをトリガーし、ajaxを呼び出してデータを更新します。プリロード方法 (2 種類) 方法):
mui.init メソッドの preloadPages パラメータを通じて設定します。
mui.init({ preloadPages:[ { url:prelaod-page-url, id:preload-page-id, styles:{},//窗口参数 extras:{},//自定义扩展参数 subpages:[{},{}]//预加载页面的子页面 } ], preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制});
mui.preload メソッドによるプリロード。mui.init({ preloadPages: [{ url: 'account_detail.html', id: 'account_detail.html' }] });mui.fire を使用する場合、詳細ページに必要なパラメーターが渡されるだけです。
プリロード方法 2:
var page = mui.preload({ url:new-page-url, id:new-page-id,//默认使用当前页面的url作为id styles:{},//窗口参数 extras:{}//自定义扩展参数});
1. 方法 1 は、プリロードされたページを非同期で作成することであり、複数のページを同時に作成できます。ただし、非同期であるため、作成された Webview オブジェクトをすぐに取得することはできません。作成された Webview を取得するには、plus.webview.getWebviewById を使用する必要があります。2. mui.fire を通じてカスタム イベントをトリガーします2. 方法 2 は、作成後に Webview を同期的に取得できます。メソッド 2 は、同時に作成できるのはプリロードされたページだけです。
原則: 同時に存在する 2 つの Web ビューは、mui.fire メソッドを使用してカスタム イベントをトリガーできます。したがって、詳細ページでカスタム イベントを作成し、リスト ページで mui.fire メソッドをリッスンできます。
mui.fire( target , event , data )
次に、リストページでリストをクリックすると、詳細ページで「account_bid_detail_fire」イベントをトリガーできます。次に、詳細ページで ajax をトリガーして、要求されたデータを更新します。記事の最後にあるボーナス: ボーナス 1: フロントエンド、Java、プロダクト マネージャー、WeChat アプレット、Python およびその他のリソースの包括的なコレクション: https://www.jianshu.com/p/e8197d4d98801. 詳細ページでカスタム イベント「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' // } }); });
特典 2: WeChat アプレットの使用開始と実際の使用に関する詳細なビデオ チュートリアルの完全なセット: https://www.jianshu.com/p/e8197d4d9880
MUI の実装 プルロードとプルダウンリフレッシュの例の共有
むいページを更新するための js return メソッドのサンプルコード
以上がmui リストを最適化して詳細ページに移動する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。