注册登录

约战

发布：2014-12-17 14:51
更新：2014-12-18 11:04
阅读：3547

关于一个文章列表页和详情页的问题

分类：MUI

mui 传值

我是一个新手
现在遇到一个问题
我要写一个文章列表页，点进去后是文章详情页

文章列表页用一个webview，加上下拉刷新的例子去填充内容，打开文章详情页的时候，再openwindow创建一个子webview，通过extras传递文章ID。

那么，

第一个问题，子webview的初始化只有一次，去子webview里面拿ID，貌似都是同一个值。

第二个问题，还有即使我拿到ID，在什么事件里面去通过ajax读取内容呢？下面我在子webview中去读取内容，可行否？

    mui.plusReady(function(){  
        var self = plus.webview.currentWebview();  
        self.addEventListener('show', fetchContent);              
    });  

    function fetchContent(){  
        alert(plus.webview.currentWebview().detailId);  
//ajax 拉去内容  
    }

第三个问题，上面这种方式好像会先显示页面再更新内容，是所谓的spa吗？会不会造成性能问题？还有就是，我要做一个中间状态拉取中的页面吗？有现成可以用的吗？

2014-12-17 14:51 负责人:无分享

7 个回复

参考：mui框架如何实现页面间传值，通过自定义事件可满足你的需求。

列表中点击列表项，触发详情页的自定义事件并传值，详情页开始加载；

不要在点击事件中再去preload详情页面，提前预加载，比如plusReady事件中

约战 (作者)

1）列表页

/**  
* 处理链接点击事件  
*/  
var detailPage = null;  
(function($) {  
$.plusReady(function() {  
    $('body').on('tap', 'a', function(e) {    
        var id = this.getAttribute('id');     

    if(!detailPage){  
        detailPage = mui.preload({  
        url:'essence-detail.html',  
        id:'essence-detail.html'  
        });  
        }  
        mui.fire(detailPage,'detailId',{id:id});  
        if (id) {                                          
        if (window.plus) {  
            $.openWindow({  
            id: 'essence-detail.html',  
                url:'essence-detail.html',  
                styles: {  
                    zindex: 99999  
                }  
            });  
        } else {  
            document.location.href = 'essence-detail.html';  
        }  
        }  
    });  
    });  
})(mui);

2）详情页

    //添加newId自定义事件监听  
    window.addEventListener('detailId',function(event){  
      //获得事件参数  
      var id = event.detail.id;  
      //根据id向服务器请求新闻详情  
      alert('detail='+id);  
    });

========================

第一次点击详情页无论如何不会alert出id
只有打开过一次详情页面之后再回到列表页点击才能alert出id
如果把openwindow的url去掉，则打开是空白页

易数网络

请问您有没有遇到下面的情况：当从列表页面点击到详情页面时，详情页面也可以接收到传过来的Id,但是当把根据id 获得的AJAX结果付给一个DIV时，DIV在界面上却没有任何变化。

2015-01-14 17:58

约战 (作者)

我勒个去，调个格式反复删除回复，这个论坛好像排版有点问题。

约战 (作者)

调好了，可以正常alert了，要在plusready时间里面预加载就好了

/**  
 * 处理链接点击事件  
 */  
var detailPage = null;  
(function($) {  
    $.plusReady(function() {  
        detailPage = mui.preload({  
        url:'essence-detail.html',  
        id:'essence-detail.html'  
    });                       
    $('body').on('tap', 'a', function(e) {    
        var id = this.getAttribute('id');     
        mui.fire(detailPage,'detailId',{id:id});  
        if (id) {                                          
        if (window.plus) {  
            $.openWindow({  
            id: 'essence-detail.html',  
            styles: {  
                zindex: 99999  
            }  
            });  
        } else {  
            document.location.href = 'essence-detail.html';  
        }  
        }  
    });  
    });  
})(mui);

约战 (作者)

版主，能不能把代码的格式稍微调好看些。。。你们可是搞前端的啊。。。

DCloud_heavensoft

这个markdown编辑器是可以代码高亮的，参考http://ask.dcloud.net.cn/article/34

2014-12-17 23:47

code

放在代码块```中就可以高亮了
看下上面的代码高亮是什么写的

该问题目前已经被锁定, 无法添加新回复