如何开发类似新浪微博这样无限滚动的列表滚动功能？

2012-12-31 10:50

题主

liutt1001
用户名称：	liutt1001
加入日期：	2012-09-01 12:41
登录次数：	145

列表能够边滚动边动态加载数据，并进行展现，类似新浪微博这样的无限滚动功能。
希望能给个思路，谢谢。

2012-12-31 11:01

Lazuzu
用户名称：	Lazuzu
加入日期：	2012-12-07 18:49
登录次数：	122

WB不是附带有无限滚动的示例么看一下不就知道了

2012-12-31 11:43

Zhao WJ
用户名称：	zhaowj
加入日期：	2011-05-02 12:07
登录次数：	1669

无限滚动的方式有两种：
1、单向无限滚动，即滚动到一定的进度然后使用Ajax动态加载内容；
2、双向无限滚动，即向前向后均可无限滚动。这个好处是不会由于加载内容过多导致浏览器崩溃，像新浪微博是单向无限滚动，积到一定的量后还得分页了，因为过多加载会导致浏览器崩溃。
双向滚动主是就是监听滚动条onScroll事件，滚动到一定程度后使用Ajax动态提取数据然后添加到列表中。在积累到一定的量后，remove掉最前面加载的dom节点以防止内容积累过多。向上滚动时加载方法同向下滚动。
思路就是这样。

2012-12-31 11:52

liutt1001
用户名称：	liutt1001
加入日期：	2012-09-01 12:41
登录次数：	145

谢谢，我就想开发类似新浪微博这样查看数据的功能

2012-12-31 15:28

Chen Jie
用户名称：	chenjie
加入日期：	2012-05-29 23:07
登录次数：	4879

此类功能，最重要的步骤是记录的定位。

在WebBuilder中变量sys.id始终是正增长的，因此可使用SQL语句获取向后的记录：

select * from table where keyID < currentID order by keyID

使用SQL语句获取向前的记录：

select * from table where keyID > currentID order by keyID

获取记录之后加载列表就相对简单了。

2012-12-31 17:17

lind
用户名称：	lind
加入日期：	2012-11-22 10:42
登录次数：	90

不错，mark~

2013-01-01 12:01

博乐
用户名称：	ywk2008
加入日期：	2012-11-10 10:42
登录次数：	433

不错就需要这种细节的讲解。呵呵

2013-01-01 13:15

Chen Jie
用户名称：	chenjie
加入日期：	2012-05-29 23:07
登录次数：	4879

其实解决方案有很多，只要掌握原理，就可根据需求来选择一种最佳方案。

返回开发者社区