Answers
题主是要做无限长度的列表?正好昨天也在看。
手机淘宝的搜索列表页就是个无限列表(其实也不是无限的。最多100页),手机淘宝的做法ul里面有若干个div,一个div中有若干个li,一个li就是一个item,当超出一定的可视范围时,移除掉div中的内容,同时给div设置固定高度。
Airbnb在2012年开源了一个js的无限列表库
Infinity.js
。和手机淘宝不同的就是不支持滚动到指定位置。
两种方法其实都不好
无论是remove 还是display:none 都会导致界面高度变化,尤其是想上滚动的时候,界面缩短的赶脚实在欠揍。
在主要影响性能方面,
无论是PC端还是手机端,100个dom跟200个dom性能没有多大差别的。
但是在手机端,100个图片跟200个图片绝对有性能差别。
避免太多的图片即可或者
下面比较复杂的方案类似于
http://ionicframework.com/docs/api/directive/collectionRepeat/
- 如果界面可以放10个items
- 用户向上滑动屏幕的时候,顶部第一个item 删除,底部插入新item
- 用户向上滑动屏幕的时候,底部第一个item 删除,顶部部插入原来的item
- 不要用原生的scrollbar了,自己编写一个scrollbar 给用户一个滑动条