通过交叉实现数据触底分页效果new IntersectionObserver（）（html、react ...

金歌  论坛元老 | 2025-1-1 11:04:56 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1705|帖子 1705|积分 5115

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
react中用法 

  1. import React, { useState, useEffect, useRef } from 'react';
  3. const InfiniteScroll = () => {
  4.   const [items, setItems] = useState([]);
  5.   const [loading, setLoading] = useState(false);
  6.   const [page, setPage] = useState(1);
  7.   const loaderRef = useRef(null);
  9.   // 模拟加载更多数据的函数
  10.   const loadMoreData = () => {
  11.     if (loading) return; // 防止重复加载
  12.     setLoading(true);
  14.     // 模拟异步数据请求
  15.     setTimeout(() => {
  16.       const newItems = Array.from({ length: 10 }, (_, index) => `Item ${(page - 1) * 10 + index + 1}`);
  17.       setItems((prevItems) => [...prevItems, ...newItems]);
  18.       setPage((prevPage) => prevPage + 1);
  19.       setLoading(false);
  20.     }, 1000); // 模拟请求延时
  21.   };
  23.   useEffect(() => {
  24.     // 创建 IntersectionObserver
  25.     const observer = new IntersectionObserver(
  26.       ([entry]) => {
  27.         if (entry.isIntersecting) {
  28.           loadMoreData(); // 当加载元素进入视口时，触发加载更多数据
  29.         }
  30.       },
  31.       {
  32.         rootMargin: '0px', // 可根据需要调整，决定何时触发
  33.         threshold: 1.0, // 触发条件：元素完全进入视口
  34.       }
  35.     );
  37.     // 启动观察
  38.     if (loaderRef.current) {
  39.       observer.observe(loaderRef.current);
  40.     }
  42.     // 清理 observer
  43.     return () => {
  44.       if (loaderRef.current) {
  45.         observer.unobserve(loaderRef.current);
  46.       }
  47.     };
  48.   }, [loading, page]);
  50.   return (
  51.     <div>
  52.       <div>
  53.         {items.map((item, index) => (
  54.           <div key={index}>{item}</div>
  55.         ))}
  56.       </div>
  57.       {/* 触底加载元素 */}
  58.       <div ref={loaderRef}>
  59.         {loading ? <p>Loading...</p> : <p>Scroll down to load more...</p>}
  60.       </div>
  61.     </div>
  62.   );
  63. };
  65. export default InfiniteScroll;
复制代码
原生js中用法 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Infinite Scroll with IntersectionObserver</title>
  7.     <style>
  8.         body {
  9.             font-family: Arial, sans-serif;
  10.             padding: 0;
  11.             margin: 0;
  12.             height: 2000px; /* Just to make the page scrollable */
  13.         }
  14.         .item {
  15.             padding: 10px;
  16.             margin: 10px 0;
  17.             background-color: #f4f4f4;
  18.             border: 1px solid #ddd;
  19.         }
  20.         #loading {
  21.             text-align: center;
  22.             padding: 10px;
  23.             background-color: #f1f1f1;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div id="content">
  29.         <!-- 初始内容 -->
  30.         <div class="item">Item 1</div>
  31.         <div class="item">Item 2</div>
  32.         <div class="item">Item 3</div>
  33.         <div class="item">Item 4</div>
  34.         <div class="item">Item 5</div>
  35.     </div>
  36.    
  37.     <!-- 加载更多的提示 -->
  38.     <div id="loading">Loading more...</div>
  40.     <script>
  41.         // 模拟加载更多数据的函数
  42.         let page = 1;
  43.         const loadMoreData = () => {
  44.             // 模拟异步请求数据
  45.             setTimeout(() => {
  46.                 const content = document.getElementById('content');
  47.                 for (let i = 0; i < 5; i++) {
  48.                     const newItem = document.createElement('div');
  49.                     newItem.classList.add('item');
  50.                     newItem.textContent = `Item ${page * 5 + i + 1}`;
  51.                     content.appendChild(newItem);
  52.                 }
  53.                 page++;
  54.             }, 1000); // 模拟1秒的延迟
  55.         };
  57.         // 设置 IntersectionObserver 监听“加载更多”元素
  58.         const loadingElement = document.getElementById('loading');
  60.         const observer = new IntersectionObserver((entries, observer) => {
  61.             // 只在元素完全进入视口时触发
  62.             entries.forEach(entry => {
  63.                 if (entry.isIntersecting) {
  64.                     loadMoreData();
  65.                     observer.unobserve(loadingElement); // 停止监听当前元素
  66.                     observer.observe(loadingElement); // 重新开始监听
  67.                 }
  68.             });
  69.         }, {
  70.             rootMargin: '0px',
  71.             threshold: 1.0 // 完全进入视口时触发
  72.         });
  74.         // 启动 IntersectionObserver
  75.         observer.observe(loadingElement);
  76.     </script>
  77. </body>
  78. </html>
复制代码
Vue2中利用

  1. <template>
  2.   <div>
  3.     <!-- 内容部分 -->
  4.     <div class="content">
  5.       <div v-for="(item, index) in items" :key="index" class="item">
  6.         {{ item }}
  7.       </div>
  8.     </div>
  10.     <!-- 加载更多提示 -->
  11.     <div id="loading" class="loading">加载更多...</div>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   data() {
  18.     return {
  19.       items: ['Item 1', 'Item 2', 'Item 3'], // 初始数据
  20.       page: 1, // 当前页数
  21.     };
  22.   },
  23.   mounted() {
  24.     // 设置 IntersectionObserver 监听加载更多区域
  25.     const loadingElement = document.getElementById('loading');
  26.     const observer = new IntersectionObserver(this.handleIntersection, {
  27.       rootMargin: '0px',
  28.       threshold: 1.0, // 完全进入视口时触发
  29.     });
  30.     observer.observe(loadingElement);
  31.   },
  32.   methods: {
  33.     handleIntersection(entries, observer) {
  34.       entries.forEach((entry) => {
  35.         if (entry.isIntersecting) {
  36.           // 如果加载更多区域进入视口，加载更多数据
  37.           this.loadMoreData();
  38.         }
  39.       });
  40.     },
  41.     loadMoreData() {
  42.       setTimeout(() => {
  43.         const newItems = Array.from({ length: 5 }, (_, i) => `Item ${this.page * 5 + i + 1}`);
  44.         this.items.push(...newItems); // 添加新数据
  45.         this.page += 1; // 增加页码
  46.       }, 1000); // 模拟网络请求延时
  47.     },
  48.   },
  49. };
  50. </script>
  52. <style>
  53. .content {
  54.   height: 1500px; /* 让页面滚动 */
  55. }
  57. .item {
  58.   padding: 10px;
  59.   margin: 10px 0;
  60.   background-color: #f4f4f4;
  61.   border: 1px solid #ddd;
  62. }
  64. .loading {
  65.   text-align: center;
  66.   padding: 10px;
  67.   background-color: #f1f1f1;
  68. }
  69. </style>
复制代码
Vue3中利用

  1. <template>
  2.   <div>
  3.     <!-- 内容部分 -->
  4.     <div class="content">
  5.       <div v-for="(item, index) in items" :key="index" class="item">
  6.         {{ item }}
  7.       </div>
  8.     </div>
  10.     <!-- 加载更多提示 -->
  11.     <div id="loading" class="loading">加载更多...</div>
  12.   </div>
  13. </template>
  15. <script>
  16. import { ref, onMounted } from 'vue';
  18. export default {
  19.   setup() {
  20.     const items = ref(['Item 1', 'Item 2', 'Item 3']); // 初始数据
  21.     const page = ref(1); // 当前页数
  23.     // 加载更多数据的函数
  24.     const loadMoreData = () => {
  25.       setTimeout(() => {
  26.         const newItems = Array.from({ length: 5 }, (_, i) => `Item ${page.value * 5 + i + 1}`);
  27.         items.value.push(...newItems); // 添加新数据
  28.         page.value += 1; // 增加页码
  29.       }, 1000); // 模拟网络请求延时
  30.     };
  32.     // 处理 IntersectionObserver 逻辑
  33.     const handleIntersection = (entries, observer) => {
  34.       entries.forEach((entry) => {
  35.         if (entry.isIntersecting) {
  36.           loadMoreData(); // 如果加载更多区域进入视口，加载更多数据
  37.         }
  38.       });
  39.     };
  41.     // 在组件挂载时设置 IntersectionObserver
  42.     onMounted(() => {
  43.       const loadingElement = document.getElementById('loading');
  44.       const observer = new IntersectionObserver(handleIntersection, {
  45.         rootMargin: '0px',
  46.         threshold: 1.0,
  47.       });
  48.       observer.observe(loadingElement);
  49.     });
  51.     return { items };
  52.   },
  53. };
  54. </script>
  56. <style>
  57. .content {
  58.   height: 1500px; /* 让页面滚动 */
  59. }
  61. .item {
  62.   padding: 10px;
  63.   margin: 10px 0;
  64.   background-color: #f4f4f4;
  65.   border: 1px solid #ddd;
  66. }
  68. .loading {
  69.   text-align: center;
  70.   padding: 10px;
  71.   background-color: #f1f1f1;
  72. }
  73. </style>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金歌

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表