使用瀑布流的一些疑问~
threezhang opened this issue · 15 comments
使用waterfall时碰到一些疑问,各位大牛有空的话希望能帮忙解答一下^_^
从数据库读数据转换成json显示到页面,我做了以下几个改动
1,DEBUG_DATA = ['{"data":{"blogs":${json}....
将blogs后面的数据换为json
2,将masnunit.js中的TEMPLATES进行了改动,以符合我的json数据格式
3,将页面中多余的form这些删掉
现在碰到的问题是
1,页面往下拉的时候,数据不能加载出来,加载之后就显示分页的div了,下一页的内容显示不出来
2,往下滚动的时候 去调用的哪个方法将数据填充到下面的呢
如果从数据动态读数据 有示例吗?
麻烦了~
首先,你要去掉DEBUG 和 DEBUG_DATA 才能动态化。
然后,要理解,subpage 子页和 upperpage 大页的区别,示例中一大页拖到底会有4次子页请求,如果你打开浏览器的Network XHR 查看器,可以清楚的看到这些子页请求:
specialcol.html?page=1
specialcol.html?page=2
...
要动态化一个瀑布流,只需要提供一组子页请求,即你需要生成这样一些地址:
xxx?page=1&yyy
xxx?page=2&yyy
...
每个请求response 数据参考 DEBUG_DATA[i] (注意:DEBUG_DATA本身是数组是为了随机获取它的第i个元素替换response data,而不是说response data 是个数组) 数据格式:
{"data":{"blogs":[${unit},...,${unit}],"has_next":true},"success":true}
这里说说你的第一个改动点,blogs 必须是数组,是由单元数据组成的数组。至于一个子页返回多少个单元,必须和配置参数里的unitsnum 保持一致,否则会出现页码数计算错误。返回数据 data.has_next 必须有,依赖它判断是否还有下一子页;data.totalcount 可以有(参考示例) ,用于更新当前的总单元数从而更新总页码数;success 表示请求数据成功,如果为 false 则会进入请求出错流程页面上会提示“网络繁忙,点此重试~”。
写到这里,得反思下,说明做的不够好,很多问题没有交代清楚,难为各位使用者。
好,到这里,你已经生成了一组请求地址:
xxx?page=1&yyy=v
xxx?page=2&yyy=v
...
怎么配置到瀑布流里面去呢?
注意每个页面可以置入多个瀑布流,由参数 "arrform" : ['album','favalbum','collect','original'] 指定。
第一个瀑布流唯一标识 album,在页面底部放置一个 form 表单与之对应
form 表单的action 和其内部的 hidden input 将被拼装成子页码请求地址: xxx?page={n}&yyy=v (注意这里的page数 n 是在js 里拼装进去的。)
说说你的第二个改动点,TEMPLATES 是用来拼装单元块的,单元块内部的数据结构变化完全不影响Woo 的运行,当然你的response data 需要满足上面提到的结构框架,以便在 masnunit.js 中对它进行解析:
{"data":{"blogs":[${unit},...,${unit}],"has_next":true},"success":true}
说说你的第三个改动点, “将页面中多余的form这些删掉” 我给出的示例一个页面置入了4个瀑布流,当你不需要这么多个的时候,比如说你只想配置一个瀑布流,那么将参数改为 "arrform" : ['album'] 就行了,我们知道 "arrform" 里的每个值对应一个form 表单,多余的可以自行删掉,不删让它们冗余在那也行。
先这样吧,再有问题再说。
谢谢LS的帮助,看了解答终于摸着一点头绪了 感谢!!!
现在页面打开XHR也都是正确的链接了,会去后台调用方法了,数据也是按每个小页面查出来是正确的。
现在碰到的问题是显示到前台有点问题
1,每次链接进入后台查出来数据是正确的,经过woo.js的$.ajax 方法 success时 h 是个document,再进入c.analyzeResponse(h);的时候masnunit.js中var jsn =
查看例子中的使用DEBUG_DATA的时候 得到的jsn是有值的
后台我该返回什么数据呢?
我试过 以下几个方案
1,
String str = "['{"data":{"blogs":'" +json+ "',"hasrp":true,"has_next":true,"pgsource":"_","nopth":false},"success":true}']";
其中
Gson gson = new Gson();
json = gson.toJson(result);
结果var jsn =
2,直接renturn json; 那就报错了
前端几乎很少用,所以问的问题都比较菜 ^_^
如果有空的话 还是希望大牛能够解答一下
c.analyzeResponse 实际上就是 masnunit.js 里的 ANALYZERESPONSE [i] 方法
这个方法会传递一个参数 h , 麻烦监控下h, 把 h 值记录下来发给我。
h 会被下面这行代码解析成 json
var jsn =
163
发件人: Three
发送时间: 2013-10-25 17:01
收件人: duitang/waterfall
抄送: Chen Bo
主题: Re: [waterfall] 使用瀑布流的一些疑问~ (#6)
谢谢LS的帮助,看了解答终于摸着一点头绪了 感谢!!!
现在页面打开XHR也都是正确的链接了,会去后台调用方法了,数据也是按每个小页面查出来是正确的。
现在碰到的问题是显示到前台有点问题
1,每次链接进入后台查出来数据是正确的,经过woo.js的$.ajax 方法 success时 h 是个document,再进入c.analyzeResponse(h);的时候masnunit.js中var jsn =
查看例子中的使用DEBUG_DATA的时候 得到的jsn是有值的
后台我该返回什么数据呢?
我试过 以下几个方案
1,
String str = "['{"data":{"blogs":'" +json+ "',"hasrp":true,"has_next":true,"pgsource":"","nopth":false},"success":true}']";
其中
Gson gson = new Gson();
json = gson.toJson(result);
结果var jsn = $.isPlainObject(h) ? h : $.parseJSON(h) 得到的jsn为null
2,直接renturn json; 那就报错了
前端几乎很少用,所以问的问题都比较菜 ^^
如果有空的话 还是希望大牛能够解答一下
—
Reply to this email directly or view it on GitHub.
var jsn =
现在碰到问题就是这里 解析h 为null了呀
不清楚你们使用的时候调用后台方法 返回h到底是什么呢
每个请求response data 数据格式:
{"data":{"blogs":[${unit},...,${unit}],"has_next":true},"success":true}
在演示demo 里给出的模拟返回数据也就是 DEBUG_DATA[0]
{"data":{"blogs":[{"is_robot":false,"photo_id":10596568,"unm":"一抹红嫣","uid":1693226,"cmts":[],"good":false,"common":false,"album_wait_audit":false,"price":0,"rid":95800538,"buylnk":"","sender_wait_audit":false,"zanc":0,"sta":0,"ava":"http://cdn.duitang.com/img/0/dfhead24x24.png ","coupon_price":0,"albnm":"花花女子与花花世界","iht":172,"albid":5542595,"favc":99,"wait_audit":false,"ruid":802123,"id":97290923,"repc":0,"isrc":"http://cdn.duitang.com/uploads/blog/201309/14/20130914190628_rFT3G.thumb.200_0.jpeg ","msg":"【辣味椒盐虾】1、 洋葱切丝、葱切小段;2、 锅中放油,稍稍多一些,虾入油锅炸;3、 一直大火炸,炸至虾壳跟虾肉分离,捞起沥油;4、 锅中放一部分炸虾的油,放干辣椒爆香略炒;5、 放洋葱,小火炒香,放入炸好的虾,转大火,稍稍翻炒,放入椒盐,炒匀;6、 撒葱花,出锅。"},...],"hasrp":true,"has_next":true,"pgsource":"tp_","nopth":false},"success":true}
@balibell 谢谢上次的回复!! 数据从后台到前台已经正常了.
是不是 woo.js里面的 $.ajax中 应该加个参数 dataType: "json"呢,
我前面提到的 后台数据组装好之后传到页面上是有问题的
在我加了dataType:"json" 之后,通过调试js,显示回调的数据就正常了.
好像woo.js中默认是String类型的??
现在又碰到了一个问题
我把woo.js中"unitsnum" 设置了为2,"subpagenum" 设置了为10, 预想的结果应该是第一次加载两个数据,当我鼠标往下滚的时候,再加载两个,再往下滚,继续加载,当加载10次了,就显示分页的div.
但是: 我每次加载页面的时候,鼠标还没拖动,就自动加载了10次,然后数据一次加载两个这样跑完了10次,就直接显示分页的div了.
是不是还要改哪里呢?
dataType 默认值 "text" ,之前确实没有这个参数设置,后面版本会加上。如果设置 dataType="json" 返回的数据格式必须严格符合json格式,否则会报错。
后面又碰到的问题,相关参数如下:
// * 每页的单元数
"unitsnum" : 24,
// * 每一大页子页数量
"subpagenum" : 4,
// 每次append插入dom的单元个数
"appendnum" : 12,
// 距离底部多远提前开始加载
"lbias" : 400,
一次加载单元个数是由 appendnum 参数控制的。你所描述的自动加载10次的情况我没办法重现。只能建议你检查ANALYZERESPONSE 方法返回值。这里留下我的qq 号码 54180405,更方便沟通。
O(∩_∩)O~ 2年过去了~
qq号一直有效: 54180405
Original Message
Sender:Threenotifications@github.com
Recipient:duitang/waterfallwaterfall@noreply.github.com
Cc:Chen Bobalibell@163.com
Date:Thursday, Jan 7, 2016 00:42
Subject:Re: [waterfall] 使用瀑布流的一些疑问~ (#6)
O(∩_∩)O~ 2年过去了~
—
Reply to this email directly or view it on GitHub.
请问一下,后台穿图片的时候,图片高度必须设置?
您好,加你qq没反应啊~~~~
@threezhang 能加你QQ交流下吗