触底加载loading...
理论性概括:在React中实现滚动触底加载可以通过监听滚动事件来检测页面滚动的位置,当滚动到页面底部时触发加载数据。
前端实现:
import React, { useState, useEffect } from 'react';
const ScrollToLoad = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [page, setPage] = useState(1);
// 模拟异步加载数据
const fetchData = async () => {
setLoading(true);
// 这里可以替换成真实的数据请求
const response = await fetch(`https://api.example.com/data?page=${page}&limit=3`);
const newData = await response.json();
setData((prevData) => [...prevData, ...newData]);
setPage((prevPage) => prevPage + 1);
setLoading(false);
};
// 监听滚动事件
const handleScroll = () => {
if (
window.innerHeight + document.documentElement.scrollTop ===
document.documentElement.offsetHeight
) {
fetchData();
}
};
// 在组件挂载时添加滚动事件监听
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<div>
<ul>
{data.map((item, index) => (
<li key={index}>{/* 渲染de数据 */}</li>
))}
</ul>
{loading && <div>Loading...</div>}
</div>
);
};
export default ScrollToLoad;
后端实现:
理论性概括:每次触底加载仅展示三条数据。
const express = require('express');
const app = express();
// 模拟de数据
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
//......
];
// 定义路由,根据page和limit参数返回对应数量的数据
app.get('/data', (req, res) => {
const page = req.query.page || 1;
const limit = req.query.limit || 3;
const startIndex = (page - 1) * limit;
const endIndex = page * limit;
const result = data.slice(startIndex, endIndex);
res.json(result);
});
// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
头部导航栏吸顶
理论性概括:滚动页面,使头部导航栏固定在头部,最终实现吸顶的效果。
//封装成组件在其它的组件中引用使用即可
import React, { useState, useEffect } from 'react';
import './index.scss'
const Navbar = () => {
const [isSticky, setIsSticky] = useState(false);
// 监听滚动事件并更新状态
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
setIsSticky(scrollTop > 0);
// 当滚动位置大于 0 时设置为吸顶
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<nav className={isSticky ? 'sticky' : ''}>
{/* 导航内容 */}
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</nav>
);
};
//导出此模块
export default Navbar;
//样式部分放入样式表使用
.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
//滚动后可以看到效果,此行可注释
background-color: bisque;
//此行可以放开使用
// background-color: #FFFFFF;
}