无限滚动是页面和列表上一种非常流行的交互方式。其基本功能是，当用户滚动浏览内容时，会自动加载更多内容。随着社交媒体的普及，海量数据被消耗，无限滚动提供了一种高效的方式浏览海量信息，无需等待页面预加载。无论用户使用何种设备，都能享受到真正响应迅速的体验。
我们将在React项目中实现无限滚动。请先创建一个React项目，然后再继续。
首先让我们添加Item组件。
const Item = ({ children, reference }) => {
return (
<div ref={reference}>
{children}
</div>
);
};
我们需要使用它来存储对无限滚动的ref最后一个元素的引用。
创建App组件。
const MAX_PAGES = 5;
const App = () => {
const [items, setItems] = React.useState([]);
const [isLoading, setIsLoading] = React.useState(false);
const [hasMore, setHasMore] = React.useState(true);
const [pages, setPages] = React.useState(0);
const observer = React.useRef();
React.useEffect(() => {
// generating the 1st page on Component Mounting
updateItems();
setPages((pages) => pages + 1);
}, []);
const lastItemRef = React.useCallback(
(node) => {
// ensuring redundant calls are not made once the data is already BEING updated
if (isLoading) return;
if (observer.current) observer.current.disconnect();
observer.current = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && hasMore) {
if (pages < MAX_PAGES) {
// adding more data only if:
// 1. MORE data exists ("hasMore" - simulated with "pages < MAX_PAGES")
// 2. the last item is visible on the screen (using the "IntersectionObserver")
updateItems();
setPages((pages) => pages + 1);
} else {
setHasMore(false);
}
}
});
if (node) observer.current.observe(node);
},
[isLoading, hasMore]
);
const updateItems = async () => {
setIsLoading(true);
// simulating asynchronous nature of api (which is the general use case for Infinite Scroll)
await new Promise((resolve) => setTimeout(resolve, 1000));
setItems((currItems) => {
const lastItem = currItems.length;
const updatedItems = [...currItems];
for (let i = 1; i <= 5; i++) {
const item = lastItem + i;
updatedItems.push(item);
}
return updatedItems;
});
setIsLoading(false);
};
return (
<React.Fragment>
<h1>Infinite Scroll Demo</h1>
{items.map((item, index) =>
index + 1 === items.length ? (
<Item reference={lastItemRef} key={index}>
{item}
</Item>
) : (
<Item key={index}>
{item}
</Item>
)
)}
{isLoading && <div className="loader" />}
</React.Fragment>
);
};
正如评论中某些人指出的那样，它可能会导致性能下降，因此建议在对大型项目列表（约 250 个以上项目）使用无限滚动时，应创建以下CSS类：
.hidden {
visibility: hidden !important;
}
并在您的物品不在视口中时将其添加到您的物品中。
Smartsapp（向上滚动查看先前的消息）
网络应用程序：https://smartsapp-ba40f.firebaseapp.com
ruppysuppy / SmartsApp
具有端到端加密（E2EE）的完全跨平台的通讯应用程序。
注意：演示中展示的功能并不详尽。演示中仅展示核心功能。
应用程序的后端由 处理Firebase。
SmartsappGoogle AnalyliticsApp从概览页面创建项目Authentication部分Sign-in method标签Email/Password并Google登录Firestore部分Rules…披萨人（向下滚动查看之前的订单）
网络应用程序：http://pizza-man-61510.firebaseapp.com/
ruppysuppy / Pizza-Man一个在线订购披萨的电子商务网站
注意：演示中展示的功能并不详尽。演示中仅展示核心功能。
您需要创建一个 Firebase 配置文件，将 Firebase 设置保存在/src/firebase/config.js以下路径中：
const firebaseConfig = {
apiKey: "API-KEY",
authDomain: "AUTH-DOMAIN.firebaseapp.com",
databaseURL: "DATABASE-URL.firebaseio.com",
projectId: "PROJECT-ID",
storageBucket: "STORAGE-BUCKET.appspot.com",
messagingSenderId: "MESSAGING-SENDER-ID",
appId: "APP-ID",
measurementId: "MEASUREMENT-ID",
};
export default firebaseConfig;
数据需要按照以下格式存储：
[
{
name: "CATEGORY NAME",
items: [
{
desc: "PIZZA DESCRIPTION",
id: "ID",
img: "IMAGE LINK",
name…
需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我
想联系我吗？请在LinkedIn上联系我
关注我的博客，每两周在Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。
我是初学者，该如何学习前端 Web 开发？
可以参考以下文章：
你能指导我吗？
抱歉，我工作已经很忙了，没时间指导任何人。