业务场景
如图,content的高固定,list-item过多时展现滚动条。
content可以是body或者任意一个div。只要将期望产生滚动条的元素设置为content就行了。
实现方法
以该图片为例,实现下拉加载。
- 在还未拉动滚动条时,不将全部的list-item展示。
- 自定义展示多少个,比如上图,展示前3个就可以了。(能撑出滚动条,但又不全部加载完)
- 拖动滚动条,当到达底部时,加载剩余的N张图片。(N也是自定义)
一个例子
一开始只加载4张图片,滚动条到content底部时,加载一张图片知道没有图片可以加载。
在还有图片未加载的时候,底部显示“加载中。。。”,图片全部加载完毕时,显示“没有更多”。
滚动条到底部
需要用到三个属性:scrollTop,offsetHeight/clientHeight,scrollHeight
- scrollTop:content部分滚动的高度
- clientHeight