列表到詳情最佳實踐

內容來源：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12575

預加載詳情頁

在列表頁中預加載詳情頁，列表頁中點擊某新聞時，經過自定義事件通知詳情頁加載對應新聞詳情，這樣能夠避免每次打開新聞詳情時從新建立webview的資源消耗。

mui.plusReady(function() { //預加載詳情頁 webview_detail = mui.preload({ url: 'detail.html', id: 'vue_demo_detail', styles: { "render": "always",//一直渲染 "popGesture": "hide", "titleNView": titleNView//使用原生漸變導航 } }); }); 

複用前頁數據

詳情頁的內容須要經過ajax從服務端動態獲取，獲取以後再渲染，這裏須要耗費必定的時間；若是網絡很差，用戶就會看到白屏或空頁面，體驗很差；
實際上，詳情頁部份內容在列表頁已經加載過，能夠直接從列表頁傳遞過來（自定義事件耗時<10毫秒），而無需等待網絡響應（ajax耗時 > 50毫秒）。所以，在列表頁點擊事件中，將列表頁已加載的、詳情頁也須要的信息經過自定義事件傳遞給詳情頁，詳情頁將這些數據當即渲染，而後再經過ajax動態獲取其他部分的數據。

一、列表頁點擊事件中傳遞已加載數據

//觸發子窗口變動新聞詳情 mui.fire(webview_detail, 'get_detail', { guid: guid, title:title, author:author, time:time, cover:cover }); 

二、詳情頁獲取前頁數據後，當即渲染，再經過ajx請求其他數據

//監聽自定義事件，獲取新聞詳情 document.addEventListener('get_detail', function(event) { var guid = event.detail.guid; if(!guid) { return; } //前頁傳入的數據，直接渲染，無需等待ajax請求詳情後 vm.cover = event.detail.cover; vm.title = event.detail.title; vm.author = event.detail.author; vm.time = event.detail.time; //向服務端請求文章詳情內容 mui.ajax('your-server-url' + guid, { type:'GET', dataType: 'json', //服務器返回json格式數據 timeout: 15000, //15秒超時 success: function(rsp) { vm.content = rsp.content; }, error: function(xhr, type, errorThrown) { mui.toast('獲取文章內容失敗'); //TODO 此處能夠向服務端告警 } }); }); 

詳情頁返回時重置頁面數據

爲了不打開下一個新聞詳情時，閃一下上一個新聞詳情，模板在詳情頁返回時，會清空詳情頁數據；由於本模板使用了vue框架，實際上執行的就是重置vue數據。

實現較爲簡單，重寫mui.back，代碼示例以下：

//重寫返回邏輯，返回時隱藏詳情頁webview mui.back = function() { plus.webview.currentWebview().hide("auto", 300); } //窗口隱藏時，重置頁面數據 mui.plusReady(function () { var self = plus.webview.currentWebview(); self.addEventListener("hide",function (e) { window.scrollTo(0, 0);//重置滾動條位置 vm.resetData();//重置頁面數據 },false); }) 

其中，vm.resetData()爲清空vue數據的方法。