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

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

html:
    

                    

                        

                            
                                
                                

                                    
{{item.title}}
                                
                                

                                    
{{item.author}}
                                    
{{item.time}}
                                
                            
                        
                    
                

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;
        ...
});