列表到详情最佳实践

内容来源：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数据的方法。