秦安
秦安
  • 发布:2017-07-21 16:49
  • 更新:2021-06-08 10:03
  • 阅读:3471

【报Bug】hello mui"从列表到详情最佳实践"的2个bug

分类:MUI

详细问题描述:
对于 hello-mui/examples/best-practices/list-to-detail 中的 listview.html 和 detail.html :
1、每个文章点开,阅读到一定进度(滚动条下滚一定距离后),返回首页再进入其他文章,即使是第一次阅读,也会到达同样的进度;
2、每次下拉刷新时,发现只有bannner得到刷新,而下面的文章列表没有得到刷新。关于这一点,我已经认真尝试了诸多次,发现只有退出这个listview.html,然后重新进入listview.html时,下面的文章列表才能得到刷新(见图1、2)。也就是说,下拉刷新没有使得下面的文章列表没有得到刷新,或者是请求到了json数据,但是数据没有被正确得显示到界面上。我觉得是如下代码有一些问题,但是我水平不高,并不敢确定:

hello-mui/examples/best-practices/list-to-detail/listview.html 中的138-145行,这个 data 和 lastID 变量的使用没有明白:

                            var data = {  
                                column: "id,post_id,title,author_name,cover,published_at" //需要的字段名  
                            }  

                            if(lastId) { //说明已有数据,目前处于下拉刷新,增加时间戳,触发服务端立即刷新,返回最新数据  
                                data.lastId = lastId;  
                                data.time = new Date().getTime() + "";  
                            }  

                            //请求顶部banner信息  
                            mui.getJSON("http://spider.dcloud.net.cn/api/banner/36kr", data, function(rsp) {  
                                news.banner = {  
                                    guid: rsp.post_id,  
                                    title: rsp.title,  
                                    cover: rsp.cover,  
                                    author:rsp.author_name,  
                                    time:dateUtils.format(rsp.published_at)  
                                };  
                            });  

                            //请求列表信息流  
                            mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {  
                                mui('#list').pullRefresh().endPulldown();  
                                if(rsp && rsp.length > 0) {  
                                    lastId = rsp[0].id; //保存最新消息的id,方便下拉刷新时使用  
                                    news.items = news.items.concat(convert(rsp));  
                                }  
                            });  
                        }  
                    }  
                }  
            });

以及,上面的concat函数是把数据接到了后面?这样会不会导致数据在后面而没有显示在前面?

图1:下拉之后,banner得到了刷新,而下面的文章列表没有得到刷新

图2:返回到上一界面,再重新进入这个界面时,下面的文章列表才得到刷新

重现步骤
[步骤] 见图1、2
[结果] 只有bannner得到刷新,而下面的文章列表没有得到刷新
[期望] banner和下面的文章列表应该都能得到刷新

运行环境
[系统版本]ios 10
[浏览器版本]
[IDE版本] HBuilder 8.8.0.201706142254
[mui版本] 8.8.0.201706142254

附件
[代码片段] 代码包见附件,问题文件是 examples\best-practices\list-to-detail\listview.html
[安装包]

联系方式
[QQ]
[电话]
[邮箱] 1227550364@qq.com

2017-07-21 16:49 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

感谢反馈,下拉刷新的问题确实存在,是concat顺序反了,正确应该是:

news.items = convert(rsp).concat(news.items);

github上代码已修复。

另外,你说的位置没变的问题,是否为特殊机型的兼容问题,代码中已在返回时,重置页面数据及回滚页面顶部

var self = plus.webview.currentWebview();  
self.addEventListener("hide",function (e) {  
    window.scrollTo(0, 0);  
    vm.resetData();  
},false);
  • 秦安 (作者)

    你好,第2个问题你说的很对,感谢解决。


    第1个问题,我刚看了你们github已经加上了你附上的这一段代码,但是目前hbuilder自建的hello mui还不带这一段代码,希望尽快加上,确实是这段的问题。但加上这一段代码之后,就失去了记录阅读进度的功能。比较理想的是,点击一个新闻的时候,能够记录这一条新闻的阅读进度,再重新点击这一条新闻能够接着继续阅读。而点击还未阅读的新闻的时候是停靠在最上面。希望可以改进一下,谢谢!

    2017-07-21 17:10

秦安

秦安 (作者)

@DCloud_MUI_CHB

还有一个问题,下面代码中的 lastId = rsp[0].id 是否应该是 lastId = rsp[0].post_id 或者 lastId = rsp[0].guid ? 我不是很确定。

  //请求列表信息流  
                            mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {  
                                mui('#list').pullRefresh().endPulldown();  
                                if(rsp && rsp.length > 0) {  
                                    lastId = rsp[0].id; //保存最新消息的id,方便下拉刷新时使用  
                                    news.items = news.items.concat(convert(rsp));  
                                }  
                            });  
                        }  
                    }  
                }  
            });
  • DCloud_UNI_CHB

    这个是根据服务端逻辑设定的,在我们的服务端,新闻资讯是从第三方抓取的,id是我们数据库的id,post_id是第三方原始新闻id,这里应该使用id

    2017-07-21 18:24

  • 秦安 (作者)

    回复 DCloud_UNI_CHB:好的谢谢。

    2017-07-21 20:38

8***@qq.com

8***@qq.com - 90厚

我测试这个一直出现的是这个错误 请问知道原因么

  • DCloud_UNI_CHB

    1、该示例仅支持在App中运行;2、检查一下你的mui版本,最好使用最新版的HBuilder新建hello mui测试看看效果

    2018-04-01 12:16

8***@qq.com

8***@qq.com - 90厚

好的 谢谢啦

8***@qq.com

8***@qq.com

为什么我在真机调试时,一直刷新不出界面,多个手机测试结果一样,浏览器测试提示跨域重复,请问如何解决呢

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