写一个能无限滚动的虚拟列表
时间: 2023-05-23 14:07:18 浏览: 110
A:好的,让我来为你编写一个无限滚动的虚拟列表。
首先,我们需要一个容器元素,用于显示列表项。假设这个容器元素的高度为 500px,我们需要在其中循环显示列表项,并根据用户的滚动行为动态加载新的列表项。
下面是一种实现方式:
HTML 代码:
```
<div id="list-container" style="height: 500px; overflow-y: scroll;">
<div id="list">
<!-- 列表项将在这里动态生成 -->
</div>
</div>
```
JavaScript 代码:
```
// 定义一个列表项的高度
const ITEM_HEIGHT = 50;
// 定义一个存储所有列表项的数组
const items = [];
// 定义一个函数,用于生成新的列表项,并添加到列表容器中
function renderItems(startIndex, endIndex) {
const listEl = document.getElementById('list');
for (let i = startIndex; i <= endIndex; i++) {
const itemEl = document.createElement('div');
itemEl.style.height = `${ITEM_HEIGHT}px`;
itemEl.innerHTML = `第 ${i} 个列表项`;
listEl.appendChild(itemEl);
items.push(itemEl);
}
}
// 初始化界面,显示初始数据
renderItems(0, 99);
// 监听容器元素的滚动事件
const containerEl = document.getElementById('list-container');
let isLoading = false; // 当前是否正在加载新数据
let lastScrollTop = 0; // 记录上次滚动位置
containerEl.addEventListener('scroll', function() {
const scrollTop = containerEl.scrollTop;
const { clientHeight, scrollHeight } = containerEl;
if (!isLoading && scrollTop > lastScrollTop && scrollTop + clientHeight >= scrollHeight - ITEM_HEIGHT * 10) {
// 上拉加载更多数据
isLoading = true;
const nextStartIndex = items.length;
const nextEndIndex = nextStartIndex + 99;
renderItems(nextStartIndex, nextEndIndex);
isLoading = false;
} else if (!isLoading && scrollTop < lastScrollTop && scrollTop <= ITEM_HEIGHT * 10) {
// 下拉刷新数据
isLoading = true;
const prevStartIndex = Math.max(0, items.length - 199);
const prevEndIndex = prevStartIndex + 99;
renderItems(prevStartIndex, prevEndIndex);
containerEl.scrollTop = ITEM_HEIGHT * 100;
isLoading = false;
}
lastScrollTop = scrollTop;
});
```
上述代码实现了一个简单的虚拟列表,它能够在用户滚动到底部时自动加载新的列表项,并在用户滚动到顶部时自动刷新显示前面的列表项。我们用一个名为 `items` 的数组存储了所有的列表项元素,这样,我们就可以避免不必要的 DOM 操作,提高了列表的渲染效率。