使用 JavaScript 实现无限滚动( 二 )

2022-09-02 JavaScript

const cardLimit = 99;

cardTotalElem 是用于在页面上显示最大卡片数量的元素，因此我们可以将设置为innerHTML值cardLimit；
cardTotalElem.innerHTML = cardLimit;

然后我们将定义一个变量来表示要增加页面的卡片数量：
const cardIncrease = 9;

我们想知道我们将拥有多少“页面”，即我们可以增加多少次内容，直到达到最大限制。例如，使用我们定义的cardLimit和cardIncrease变量，我们可以将内容增加 10 倍（假设我们已经加载了前 9 个元素），直到达到限制。我们将通过除以来做到这cardLimit一点cardIncrease 。
const pageCount = Math.ceil(cardLimit / cardIncrease);

然后我们将定义一个值来确定我们在哪个页面上：
let currentPage = 1;

创建新卡现在我们有了所有的常量，让我们创建一个函数来向卡片容器中添加一张新卡片。我们将innerHTML卡片的设置为索引值，这样我们就可以跟踪我们正在添加的卡片数量。
此演示中的一个有趣功能是每张卡片都有随机生成的背景颜色。

如何使用 JavaScript 生成随机背景颜色

const getRandomColor = () => {
const h = Math.floor(Math.random() * 360);
return `hsl(${h}deg, 90%, 85%)`;
};
const createCard = (index) => {
const card = document.createElement("div");
card.className = "card";
card.innerHTML = index;
card.style.backgroundColor = getRandomColor();
cardContainer.AppendChild(card);
};

将卡片添加到容器中现在我们将使用与分页教程类似的功能将卡片添加到容器中。
首先，确定要添加到页面的卡片范围。该addCards函数将接受一个pageIndex参数，该参数将更新全局currentPage值。如果我们在第 1 页，我们将添加卡片 1 到 9 。如果我们在第 2 页，我们将添加卡片 10 到 18，依此类推。
我们可以在数学上将其定义为：
const addCards = (pageIndex) => {
currentPage = pageIndex;
const startRange = (pageIndex - 1) * cardIncrease;
const endRange = pageIndex * cardIncrease;
for (let i = startRange + 1; i <= currRange; i++) {
createCard(i);
}
};

在这个函数中，我们的开始范围总是比我们试图获得的值小一（即在第 1 页，开始范围是 0，在第 2 页，开始范围是 9）所以我们将考虑这一点通过将我们的 for 循环索引的值设置为startRange + 1.
检测何时达到卡限制我们必须注意的一个限制是endRange数量。如果我们在最后一页，我们希望结束范围与cardLimit. 例如，如果我们有cardLimit75 和cardIncrease10 的 a 并且我们在第 8 页，我们的起始索引将是 70，我们的endRange值应该是 75 。
我们将修改我们的addCards函数来解决这个问题：
const addCards = (pageIndex) => {
currentPage = pageIndex;
const startRange = (pageIndex - 1) * cardIncrease;
const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
for (let i = startRange + 1; i <= endRange; i++) {
createCard(i);
}
};

我们的演示还包括一个cardTotal元素，该元素显示页面上当前显示的卡片数量，因此我们innerHTML将此元素的设置为结束范围。
const addCards = (pageIndex) => {
currentPage = pageIndex;
const startRange = (pageIndex - 1) * cardIncrease;
const endRange = currentPage == pageCount ? cardLimit : pageIndex * cardIncrease;
cardCountElem.innerHTML = endRange;
for (let i = startRange + 1; i <= endRange; i++) {
createCard(i);
}
};

加载初始卡片我们已经定义了将卡片添加到容器的功能，因此我们将包含一个window.onload函数来设置要添加到页面的初始卡片。
window.onload = function () {
addCards(currentPage);
};

处理无限滚动currentPage当我们到达页面末尾时，我们将通过增加向容器添加新卡片的数量来处理无限滚动。innerHeight我们可以通过将窗口的值添加到滚动值pageYOffset并将其与offsetHeight作为页面总高度的文档进行比较来检测何时到达页面末尾。
这是它的外观的视觉表示：
一旦我们到达页面的末尾，我们想通过调用addCardscurrentPage + 1 的函数来加载一个新页面。
const handleInfiniteScroll = () => {
const endOfPage = window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
if (endOfPage) {
addCards(currentPage + 1);
}
};

然后我们为窗口滚动创建一个事件监听器，并将上面的函数传递给它：

推荐阅读

上一篇：苦瓜泡一物三天血糖降专家提醒!吃苦瓜并不能降血糖

下一篇：驱动安装的方法及一般步骤安装驱动的三种方法是什么