90行代码，15个元素实现无限滚动

最新推荐文章于 2023-05-31 19:10:59 发布
最新推荐文章于 2023-05-31 19:10:59 发布
阅读量164 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45566319/article/details/100984059
版权

前言

在本篇文章你将会学到：

IntersectionObserver API 的用法，以及如何兼容。
如何在React Hook中实现无限滚动。
如何正确渲染多达10000个元素的列表。

无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。
当你使用滚动作为发现数据的主要方法时，它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行，大量的数据被用户消费。无线滚动提供了一个高效的方法让用户浏览海量信息，而不必等待页面的预加载。

如何构建一个体验良好的无限滚动，是每个前端无论是项目或面试都会碰到的一个课题。

本文的原版实现来自：Creating Infinite Scroll with 15 Elements

  1. 早期的解决方案

关于无限滚动，早期的解决方案基本都是依赖监听scroll事件：

function fetchData() {
 fetch(path).then(res => doSomeThing(res.data));
}
window.addEventListener('scroll', fetchData);
复制代码

然后计算各种.scrollTop()、.offset().top等等。

手写一个也是非常枯燥。而且：

scroll事件会频繁触发，因此我们还需要手动节流。
滚动元素内有大量DOM，容易造成卡顿。

后来出现交叉观察者IntersectionObserver API ，在与Vue、React这类数据驱动视图的框架后，无限滚动的通用方案就出来了。2. 交叉观察者：IntersectionObserver

const box = document.querySelector('.box');
const intersectionObserver = new IntersectionObserver((entries) => {
 entries.forEach((item) => {
 if (item.isIntersecting) {
 console.log('进入可视区域');
 }
 })
});
intersectionObserver.observe(box);
复制代码

敲重点： IntersectionObserver API是异步的，不随着目标元素的滚动同步触发，性能消耗极低。

2.1 IntersectionObserverEntry对象

这里我就粗略的介绍下需要用到的：IntersectionObserve初试

IntersectionObserverEntry对象

callback函数被调用时，会传给它一个数组，这个数组里的每个对象就是当前进入可视区域或者离开可视区域的对象(IntersectionObserverEntry对象)

这个对象有很多属性，其中最常用的属性是：

target: 被观察的目标元素，是一个 DOM 节点对象
isIntersecting: 是否进入可视区域
intersectionRatio: 相交区域和目标元素的比例值，进入可视区域，值大于0，否则等于0
2.3 options

调用IntersectionObserver时，除了传一个回调函数，还可以传入一个option对象，配置如下属性：

threshold: 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。用户可以自定义这个数组。比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
root: 用于观察的根元素，默认是浏览器的视口，也可以指定具体元素，指定元素的时候用于观察的元素必须是指定元素的子元素
rootMargin: 用来扩大或者缩小视窗的的大小，使用css的定义方法，10px 10px 30px 20px表示top、right、bottom 和 left的值

const io = new IntersectionObserver((entries) => {
 console.log(entries);
}, {
 threshold: [0, 0.5],
 root: document.querySelector('.container'),
 rootMargin: "10px 10px 30px 20px",
});
复制代码

2.4 observer

observer.observer（nodeone）; //仅观察nodeOne 
observer.observer（nodeTwo）; //观察nodeOne和nodeTwo 
observer.unobserve（nodeOne）; //停止观察nodeOne
observer.disconnect（）; //没有观察任何节点
复制代码
  1. 如何在React Hook中使用IntersectionObserver

在看Hooks版之前，来看正常组件版的：

class SlidingWindowScroll extends React.Component {
this.$bottomElement = React.createRef();
...
componentDidMount() {
 this.intiateScrollObserver();
}
intiateScrollObserver = () => {
 const options = {
 root: null,
 rootMargin: '0px',
 threshold: 0.1
 };
 this.observer = new IntersectionObserver(this.callback, options);
 this.observer.observe(this.$bottomElement.current);
}
render() {
 return (
 <li className='img' ref={this.$bottomElement}>
 )
}
复制代码

众所周知，React 16.x后推出了useRef来替代原有的createRef，用于追踪DOM节点。那让我们开始吧：

  1. 原理

实现一个组件，可以显示具有15个元素的固定窗口大小的n个项目的列表： 即在任何时候，无限滚动n元素上也仅存在15个DOM节点。

采用relative/absolute 定位来确定滚动位置
追踪两个ref: top/bottom来决定向上/向下滚动的渲染与否
切割数据列表，保留最多15个DOM元素。
5. useState声明状态变量

我们开始编写组件SlidingWindowScrollHook:

const THRESHOLD = 15;
const SlidingWindowScrollHook = (props) => {
 const [start, setStart] = useState(0);
 const [end, setEnd] = useState(THRESHOLD);
 const [observer, setObserver] = useState(null);
 // 其它代码...
}
复制代码
  1. useState的简单理解:

const [属性, 操作属性的方法] = useState(默认值);
复制代码
2. 变量解析

start：当前渲染的列表第一个数据，默认为0
end: 当前渲染的列表最后一个数据，默认为15
observer: 当前观察的视图ref元素
6. useRef定义追踪的DOM元素

const $bottomElement = useRef();
const $topElement = useRef();
复制代码

正常的无限向下滚动只需关注一个dom元素，但由于我们是固定15个dom元素渲染，需要判断向上或向下滚动。

  1. 内部操作方法和和对应useEffect

请配合注释食用：

useEffect(() => {
 // 定义观察
 intiateScrollObserver();
 return () => {
 // 放弃观察
 resetObservation()
 }
},[end]) //因为[end] 是同步刷新，这里用一个就行了。
// 定义观察
const intiateScrollObserver = () => {
 const options = {
 root: null,
 rootMargin: '0px',
 threshold: 0.1
 };
 const Observer = new IntersectionObserver(callback, options)
 // 分别观察开头和结尾的元素
 if ($topElement.current) {
 Observer.observe($topElement.current);
 }
 if ($bottomElement.current) {
 Observer.observe($bottomElement.current);
 }
 // 设初始值
 setObserver(Observer) 
}
// 交叉观察的具体回调，观察每个节点，并对实时头尾元素索引处理
const callback = (entries, observer) => {
 entries.forEach((entry, index) => {
 const listLength = props.list.length;
 // 向下滚动，刷新数据
 if (entry.isIntersecting && entry.target.id === "bottom") {
 const maxStartIndex = listLength - 1 - THRESHOLD; // 当前头部的索引
 const maxEndIndex = listLength - 1; // 当前尾部的索引
 const newEnd = (end + 10) <= maxEndIndex ? end + 10 : maxEndIndex; // 下一轮增加尾部
 const newStart = (end - 5) <= maxStartIndex ? end - 5 : maxStartIndex; // 在上一轮的基础上计算头部
 setStart(newStart)
 setEnd(newEnd)
 }
 // 向上滚动，刷新数据
 if (entry.isIntersecting && entry.target.id === "top") {
 const newEnd = end === THRESHOLD ? THRESHOLD : (end - 10 > THRESHOLD ? end - 10 : THRESHOLD); // 向上滚动尾部元素索引不得小于15
 let newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0); // 头部元素索引最小值为0
 setStart(newStart)
 setEnd(newEnd)
 }
 });
}
// 停止滚动时放弃观察
const resetObservation = () => {
 observer && observer.unobserve($bottomElement.current); 
 observer && observer.unobserve($topElement.current);
}
// 渲染时，头尾ref处理
const getReference = (index, isLastIndex) => {
 if (index === 0)
 return $topElement;
 if (isLastIndex) 
 return $bottomElement;
 return null;
}
复制代码
  1. 渲染界面
 const {list, height} = props; // 数据，节点高度
 const updatedList = list.slice(start, end); // 数据切割
 
 const lastIndex = updatedList.length - 1;
 return (
 <ul style={{position: 'relative'}}>
 {updatedList.map((item, index) => {
 const top = (height * (index + start)) + 'px'; // 基于相对 & 绝对定位 计算
 const refVal = getReference(index, index === lastIndex); // map循环中赋予头尾ref
 const id = index === 0 ? 'top' : (index === lastIndex ? 'bottom' : ''); // 绑ID
 return (<li className="li-card" key={item.key} style={{top}} ref={refVal} id={id}>{item.value}</li>);
 })}
 </ul>
 );
复制代码
  1. 如何使用

App.js:

import React from 'react';
import './App.css';
import { SlidingWindowScrollHook } from "./SlidingWindowScrollHook";
import MY_ENDLESS_LIST from './Constants';
function App() {
 return (
 <div className="App">
 <h1>15个元素实现无限滚动</h1>
 <SlidingWindowScrollHook list={MY_ENDLESS_LIST} height={195}/>
 </div>
 );
}
export default App;
复制代码

定义一下数据 Constants.js:

const MY_ENDLESS_LIST = [
 {
 key: 1,
 value: 'A'
 },
 {
 key: 2,
 value: 'B'
 },
 {
 key: 3,
 value: 'C'
 },
 // 中间就不贴了...
 {
 key: 45,
 value: 'AS'
 }
]
复制代码

SlidingWindowScrollHook.js:

import React, { useState, useEffect, useRef } from "react";
const THRESHOLD = 15;
const SlidingWindowScrollHook = (props) => {
 const [start, setStart] = useState(0);
 const [end, setEnd] = useState(THRESHOLD);
 const [observer, setObserver] = useState(null);
 const $bottomElement = useRef();
 const $topElement = useRef();
 useEffect(() => {
 intiateScrollObserver();
 return () => {
 resetObservation()
 }
 // eslint-disable-next-line react-hooks/exhaustive-deps
 },[start, end])
 const intiateScrollObserver = () => {
 const options = {
 root: null,
 rootMargin: '0px',
 threshold: 0.1
 };
 const Observer = new IntersectionObserver(callback, options)
 if ($topElement.current) {
 Observer.observe($topElement.current);
 }
 if ($bottomElement.current) {
 Observer.observe($bottomElement.current);
 }
 setObserver(Observer) 
 }
 const callback = (entries, observer) => {
 entries.forEach((entry, index) => {
 const listLength = props.list.length;
 // Scroll Down
 if (entry.isIntersecting && entry.target.id === "bottom") {
 const maxStartIndex = listLength - 1 - THRESHOLD; // Maximum index value `start` can take
 const maxEndIndex = listLength - 1; // Maximum index value `end` can take
 const newEnd = (end + 10) <= maxEndIndex ? end + 10 : maxEndIndex;
 const newStart = (end - 5) <= maxStartIndex ? end - 5 : maxStartIndex;
 setStart(newStart)
 setEnd(newEnd)
 }
 // Scroll up
 if (entry.isIntersecting && entry.target.id === "top") {
 const newEnd = end === THRESHOLD ? THRESHOLD : (end - 10 > THRESHOLD ? end - 10 : THRESHOLD);
 let newStart = start === 0 ? 0 : (start - 10 > 0 ? start - 10 : 0);
 setStart(newStart)
 setEnd(newEnd)
 }
 
 });
 }
 const resetObservation = () => {
 observer && observer.unobserve($bottomElement.current);
 observer && observer.unobserve($topElement.current);
 }
 const getReference = (index, isLastIndex) => {
 if (index === 0)
 return $topElement;
 if (isLastIndex) 
 return $bottomElement;
 return null;
 }
 const {list, height} = props;
 const updatedList = list.slice(start, end);
 const lastIndex = updatedList.length - 1;
 
 return (
 <ul style={{position: 'relative'}}>
 {updatedList.map((item, index) => {
 const top = (height * (index + start)) + 'px';
 const refVal = getReference(index, index === lastIndex);
 const id = index === 0 ? 'top' : (index === lastIndex ? 'bottom' : '');
 return (<li className="li-card" key={item.key} style={{top}} ref={refVal} id={id}>{item.value}</li>);
 })}
 </ul>
 );
}
export { SlidingWindowScrollHook };
复制代码

以及少许样式：

.li-card {
 display: flex;
 justify-content: center;
 list-style: none;
 box-shadow: 2px 2px 9px 0px #bbb;
 padding: 70px 0;
 margin-bottom: 20px;
 border-radius: 10px;
 position: absolute;
 width: 80%;
}
复制代码

然后你就可以慢慢耍了。。。
在这里插入图片描述

  1. 兼容性处理

IntersectionObserver不兼容Safari?

莫慌，我们有polyfill版
在这里插入图片描述

每周34万下载量呢，放心用吧臭弟弟们。
在这里插入图片描述

最后

分享移动开发与微信小程序开发该做哪些！其中有哪些关键的技术点！需要下图学习教程的欢迎加入web前端交流群：854591759获取！
点击链接加入群聊【web前端交流群】：
在这里插入图片描述

小可乐程序员
关注
专栏目录
React 滚动加载--ahooks--useInfiniteScroll
qq_44638443的博客
11-26 1985
React 滚动加载--ahooks--useInfiniteScroll
90行代码，15个元素实现无限滚动，2024前端最新大厂面试真题
最新发布
m0_46608024的博客
03-20 701
return (return (})}复制代码以及少许样式：.li-card {width: 80%;复制代码然后你就可以慢慢耍了。。。IntersectionObserver不兼容Safari?莫慌，我们有polyfill版每周34万下载量呢，放心用吧臭弟弟们。项目源地址：github.com/roger-hiro/…作者：前端劝退师。
AHooks无限滚动useInfiniteScroll使用
张兴华的博客
05-31 3550
useInfiniteScroll 封装了常见的无限滚动逻辑。假如第一次请求返回数据为 { list: [1, 2, 3] }, 第二次返回的数据为 { list: [4, 5, 6] }, 则我们会自动合并 list，整合后的的 data 为 { list: [1, 2, 3, 4, 5, 6] }。注：这里官方说了对于返回的字段是list，才会帮你进行合并，所以可以跟后端的同学商量返回的数组数据用list做属性名，或者你也可以拿到后端的数据自己生成list属性名。
使用Unity3d和C#进行背包滚动（可设置多行）
PMxiang的博客
08-16 3544
使用Unity3d和C#进行背包滚动（可设置多行）引入什么是无限滚动代码设计思路一、设计Scrollview部分1.思路说明代码部分二、初始化生成预设体创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 引入 我们在玩游戏时，大多数游戏都有背包这个界面，譬如王者荣耀的背包，那么多的格子，如果完全加载出来是非常消耗性能的。我们在使用Unity3d和C#
前端实现无限循环滚动三种方式（react hooks示例）：js || css || 插件
希望我快乐
05-07 9606
滚动数据根据需要改为图片或html元素，或者从接口读取数据组装元素 横向滚动，修改容器宽高，将 scrollTop 改为 scrollLeft 渲染数据变化时，或者在模态框作渲染等依据一些外在条件变化需要重新渲染时，必须清除所有定时器 封装组件使用，需考虑：依赖项，滚动方向，速率，每条数据渲染形式 import { useState, useEffect, useRef } from 'react' // 定时器 let intervalTimer, timeoutTimer const Index.
React Hooks 实现虚拟列表无限滚动与自适应输入框
weixin_41531446的博客
07-24 1717
利用 IntersectionObserver 实现虚拟列表无限滚动 设计背景： 用于实现长列表的无限滚动 DOM 渲染的性能，使用虚拟列表，在滚动过程中只展示特定的视野左右的列表项。 一. 核心技术：原生的交叉观察者（IntersectionObserver） 利用交叉观察者可以监听元素在滚动过程中和祖先元素的相交情况，利用这个API可以避免对滚动的监听和频繁的计算。 创建一个 Observer 实例，分别观察列表头尾元素，传入相应的配置，这里头部有个 fixed 定位的 header 所以设置祖
n个容器元素实现无限滚动的实现代码
12-14
如何正确渲染多达10000个元素的列表。 无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。 当你使用滚动作为发现数据的主要方法时，它可能使你的用户在网页上...
用CSS3实现无限循环的无缝滚动的实例代码
09-24
具体到无限循环滚动的场景，我们可以设置一个向上滚动的动画，动画的起始点和结束点分别是元素的初始状态和向下滑动一定距离后的位置。 示例中提到的使用transform属性中的translate3d来控制元素的位置，这比直接...
用CSS3实现无限循环的无缝滚动的示例代码
09-24
- 如果内容是动态加载的，可能需要使用JavaScript来动态克隆和添加元素，以保持无限滚动的效果。 - 考虑到浏览器兼容性，需要添加-webkit-前缀以支持旧版本的Webkit浏览器。 - 要注意动画性能，过多的动画可能会对...
挺好玩的文字滑动效果
weixin_42855542的博客
10-23 320
用多了背景滑动，突然想用文字滑动的效果。 先直接看效果 接着直接上代码，来一个hover事件先： html： &lt;div class="cont"&gt; &lt;a data-hover="你在南方的艳阳里大雪纷飞" class="animate"&gt;你在南方的艳阳里大雪纷飞&lt;/a&gt; &lt;/div&gt; css： .cont{
可以上下左右滚动的经典代码
weixin_30376453的博客
03-08 368
一个可以上下左右滚动的经典代码。 1<HTML> 2<HEAD> 3<TITLE>滚动效果</TITLE> 4<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> 5</HEAD> 6&lt...
多行多列，无限滚动文本显示控件
pgmsoul的专栏
02-24 2751
//ConTable.H class ConTable : public base::View{ protected: base::Header header; base::ScrollWnd table; typedef class _Line : public base::_class{ public: base::StringList Texts; base:
多项列表无限滚动
github_39051926的博客
07-18 874
暂无中奖记录--%>                             b***n抽中5元返金券                             b***n抽中50元话费券                             b***m抽中九阳原汁机                             b***n抽中格力空调扇                    
Vue仿饿了么app项目总结
weixin_45566319的博客
09-02 2057
前言 这是我的第一个基于Vue项目的作品，目的是把之前的前端知识累积加上目前流行的前端框架，以项目的形式展示出来。 大家在学习Vue的时候，可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么app项目总结 效果图 这个最后做出来的效果图 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue仿饿了么app项目总结 Vue...
基于 Vue 的商品主图放大镜方案
weixin_45566319的博客
09-20 1536
前言 在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于Vue的第三方包不多并且无法直接复用，今天，我来分享一种高稳定性的基于 Vue 的图片放大镜方法。 实现原理 放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定位大图。 图1 原理图（以2倍放大为例） 相信原理图已经画的很明白了， 图中，左侧框是小图框，其蓝色区域为图片遮罩层（需放大区域），右侧框是整个大图目前所在区域...
Vue3.x源码调试
weixin_45566319的博客
10-18 1402
断点调试 根据demo小例子或者api的使用姿势进行调试，每个小例子只关心其走过的逻辑分支。 如何调试vue3.x的ts源码 官网说使用 yarn dev 命令就可以对其进行调试，可是运行该命令后，是生成过后的代码，不能对其编写的ts源码进行调试。 其实再生成对应的sourcemap文件，便可以原汁原味的调试。 先看下几个截图： 如果这是你想要的调试效果，下面请看下如何生成sourcemap文...
用Vue.js开发微信小程序：开源框架mpvue解析
weixin_45566319的博客
09-29 1070
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为 H5，mpvue 将是十分契合的一种解决方案。 目前， mpvue 已经在美团点评多个实际业务项目中得到了验证，因此我们决定将其开源，希望更多技术同行一起开发，应用到...
拿到一份设计稿，我该如何进行移动端开发？
weixin_45566319的博客
09-17 999
出来混，那些混过去的，迟早是要还的 (￣Д ￣)┍ 。 让我们来解决几个问题： 1. 什么是 viewport ? 它的的作用是啥？ 提到 viewport，之前总感觉挺突兀的，但是当我最近做移动端项目时，突然关注到一直被忽略的 meta 标签的时候，才恍然大悟（o(╯□╰)o）。那么，首先让我们来了解一下 meta 标签☛一直被忽略的meta标签了解一下，之后再去看 viewport，就很容易记...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值