列表到详情最佳实践

内容来源：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动态获取其余部分的数据。

1、列表页点击事件中传递已加载数据

//触发子窗口变更新闻详情
mui.fire(webview_detail, 'get_detail', {
    guid: guid,
    title:title,
    author:author,
    time:time,
    cover:cover
});

2、详情页获取前页数据后，立即渲染，再通过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数据的方法。