zoukankan      html  css  js  c++  java
  • 列表到详情最佳实践

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

  • 相关阅读:
    Redis源码分析(二十一)--- anet网络通信的封装
    leetcode 总结part1
    leetcode String to Integer (atoi)
    leetcode 165. Compare Version Numbers
    leetcode 189. Rotate Array
    leetcode 168. Excel Sheet Column Title
    leetcode 155. Min Stack
    leetcode 228. Summary Ranges
    leetcode 204. Count Primes
    leetcode 6. ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/peipeiyu/p/9303191.html
Copyright © 2011-2022 走看看