开发思路解析
- 实现效果,永远只渲染在可视区域的DOM数据
- 计算容器展示所有数据的时候的高度
- 滚动计算动态显示的开始下标和结束下标
- slice截取显示的数据, 数据整体transformY之前数据的高度
- 瀑布流布局的情况,对不同的列计算高度,最大高度为容器高度
滚动过程中计算可视区域到滚动容器顶部的距离有一定难度
模拟数据,固定高度50一行
createMockData = () => {
let data = [];
for (var i = 1; i < 10001; i++) {
data.push(`${i}: 第${i}个>>>>>>>>>>>>>>>>>>>>>>`)
}
this.setState({
mockData: data
})
this.refs.scrollBody.style.height = 10000 * 50 + "px";
const canSeeNums = Math.ceil(Number(this.refs.wrrapCpntainer.style.height.split("px")[0]) / 50) + 2;
this.setState({
tail: canSeeNums,
canSeeNums: canSeeNums, // 可展示的数量+2
itemHeight: 50
})
}
滚动动态计算 head、tail,展示的节点开始结束
handSrcoll = (e) => {
if (e.target.scrollTop) {
this.setState({
head: Math.ceil((e.target.scrollTop - this.state.itemHeight + 10) / this.state.itemHeight),
tail: Math.ceil(e.target.scrollTop / this.state.itemHeight) + 11
})
} else {
this.setState({
head: 0,
tail: this.state.canSeeNums
})
}
}
deBounce = (fn, timeOut = 100) => {
let setTime;
return function (...args) {
let flag = true;
if (flag) {
fn.apply(this, args);
}
setTime = setTimeout(() => {
flag = false;
clearTimeout(setTime)
}, timeOut)
}
}
结构
如果不是固定高度的行,需要动态计算之前数据占据的高度,在设置transformY
给滚动加上防抖避免触发过多的判断
<div
style={{
width: 300, height: 500,
border: "1px solid #ddd",
overflowY: "scroll", margin: "20px auto"
}}
ref="wrrapCpntainer"
onScroll={this.deBounce(this.handleScroll)}
>
{/** 滚动容器 */}
<div ref="scrollBody">
<div
style={{
transform:
`translateY(${(head * itemHeight)}px)`
}}
>
{(renderData.slice(head, tail)).map((item) => (
<div
style={{
height: 50, textAlign: "center", borderBottom: "1px solid #ddd", lineHeight: "50px",
}}
>
{item}
</div>
))}
</div>
</div>
</div>