MUI+Hbuilder之列表页到详情页面（四）

常见的列表页面跳转至某个详情页面的操作。
基于vue.js
列表页：listview.html:

html:
    <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-media" v-for="item in items">
                            <a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)">
                                <img class="mui-media-object mui-pull-left" :src="item.cover">
                                <div class="mui-media-body">
                                    <div class="mui-ellipsis-2">{{item.title}}</div>
                                </div>
                                <div class="meta-info">
                                    <div class="author">{{item.author}}</div>
                                    <div class="time">{{item.time}}</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

js:
      var webview_detail = null; //详情页webview
       mui.plusReady(function() {
                //预加载详情页
                webview_detail = mui.preload({
                    url: 'detail.html',
                    id: 'news_detail',
                    styles: {
                        "render": "always",
                        "popGesture": "hide",
                        "bounce": "vertical",
                        "bounceBackground": "#efeff4",
                        "titleNView": titleNView
                    }
                });
        });
    function open_detail(item) {
                //触发子窗口变更新闻详情
                mui.fire(webview_detail, 'get_detail', {
                    guid: item.guid,
                    title: item.title,
                    author: item.author,
                    time: item.time,
                    cover: item.cover
                });

                //更改详情页原生导航条信息
                titleNView.titleText = item.title;
                webview_detail.setStyle({
                    "titleNView": titleNView
                });
                setTimeout(function() {
                    webview_detail.show("slide-in-right", 300);
                }, 150);
}

详情页：detail.html

document.addEventListener('get_detail', function(event) {
    var guid = event.detail.guid;
        var title =  event.detail.title;
        ...
});