react触底加载loading.../头部导航吸顶操作

触底加载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;
  }