- 综合排序
- 最热优先
- 最新优先
- 来自专栏异名
背景无限滚动
这是游戏里面很常用的一个功能模块，它就像你的生活，有着走不完的路程。它的实现也很简单，要么做一个很长的背景图，然后移动相机；要么就是实现一个跑马灯，像那些轮播图什么的，大家应该都有写过。
2.2K30发布于 2020-06-09 React 查询：无限滚动
在这篇文章中我们将谈谈 React Query 这个状态管理工具提供的一个令人惊叹的功能，即无限滚动（Infinite Scroll）。 在这些平台上，我们不再使用传统的分页，而是通过无限滚动来加载数据。没有上一页或下一页的按钮，数据会根据需要自动生成。但在底层，无限滚动仍然是分页的一种形式。下面让我们看看代码吧！ 正如我之前所说，无限滚动是一种不同类型的分页 让我们使用 React Query 的 useInfiniteQuery 钩子。 <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </React.StrictMode>现在我们的无限滚动就做好了我正在参与
1.5K00编辑于 2024-01-30- 来自专栏京程一灯
无限滚动加载最佳实践
无限滚动（Infinite scrolling），有时候被称为无尽滚动（endless scrolling），这种技术允许用户在大量内容上滚动，眼中看不到结束的地方。 优秀无限滚动的五项原则 将无限滚动做好，并不是不可能完成的任务。为了完成它，记住并遵守以下方针。 1. 如果屏幕上是滚动的内容，用户滚动获取新内容的时候，导航条可以隐藏起来；当用户开始往回滚动试图回到顶部的时候再显示出来。 ? 2. 如果有页脚，加上“加载更多”按钮 无限滚动阻碍用户的访问页脚。 3. 返回按钮将用户待回至之前的位置 有时候，无限滚动的实现带来一个主要的可用性缺陷：滚动位置并未被记录为“状态”。如果用户从列表中的链接跳转了，然后点返回按钮，他们希望能回到页面原来相同的位置。 结论 无限滚动实现得好的话，可以达到令人难以置信的光滑无缝体验。很好的是，关于好的无限滚动，你已经获得一些线索了，这会帮你建立完美的用户体验。
5.9K20发布于 2019-03-27 - 来自专栏Vue开发社区
一个快速的 Vue3 无限滚动组件
无限滚动组件是在用户向下滚动页面时加载新内容，而不是将其分成多个页面。 它们对于特定类型的内容（例如用户生成的内容）非常有效。 以下是无限滚动的示例。 在今天的教程中，我们将使用 Composition API 创建一个 Vue3 无限滚动组件。这是我们将在它结束时构建的内容的预览。 如你所见，它是无限滚动，屏幕右侧的滚动条反映了这一点。 无论如何，学习如何构建一个 Vue3 无限滚动组件是非常有趣的，并且可能对你有用。 首先，让我们从高层次上回顾一下这个系统是如何工作的。 那么，现在让我们继续进行激动人心的部分：无限滚动！ 4. Vue3 无限滚动 现在我们已经完成了所有设置，当用户向下滚动到内容底部时，我们可以开始加载更多数据。 当我们向下滚动到当前内容的底部时，应该会自动加载新内容。让我们看看我们有什么。 无限滚动组件的可能扩展 这只是创建Vue3无限滚动组件的介绍。有很多不同的方向可以改进它。
3.2K20编辑于 2022-12-01 - 来自专栏学海无涯
iOS开发之UIScrollView无限滚动
UIScrollView 的无限滚动主要应用在图片轮播器、欢迎界面等场景。首先需要说明的是，文本所讲的是一种"笨办法"，但是好理解且容易实现，在图片不多的时候用它也无妨。 它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片，在最后一张图片之后放第一张图片，然后在滚动到边缘的时候，巧妙的过渡一下就可以"瞒天过海"，"以假乱真"的造成无限滚动的假象。 2、代码实现，主要分为：添加UIScrollView，添加显示图片，添加UIPageControl，然后监听UIScrollView的滚动，根据滚动的位置来设置UIPageControl，最重要的是对于滚动到两个边缘时要特殊处理一下 define MAX_SIZE 7 #import "ViewController.h" @interface ViewController () <UIScrollViewDelegate> //滚动视图 图片无限轮播.gif 写在后面的话 其实实现轮播现在最好的方案应该是使用UICollectionView，因为它是利用重用机制来实现的，性能会好很多，代码写起来类似。
2.4K100发布于 2018-05-03 - 来自专栏全栈程序员必看
js图片横排无限循环滚动
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w<em>3</em>.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html Slider,30); } }; </script> <div id="div1">
- <img src="img/<em>3</em>.
13.7K30编辑于 2022-09-09 - 来自专栏小丑的小屋
摸鱼的新发现，滚动条无限滚动
extends Vue {} interface IntrinsicElements { [elem: string]: any } } } Element-ui 的无限滚动 使用count模拟初始数据，滚动到底部的时候触发 load 方法通过 push 方法模拟滚动请求回来的数据。 components: { ElementScroll }, }) export default class App extends Vue { public count = [1, 2, 3, 首先需要获取滚动条的位置,即可视区的高度和内容区域底部距离可视区页面顶部的距离,如果他们相等此时浏览器的滚动条当好滚动到页面底部，如果相差是负数说明浏览器的滚动条还没有到达页面底部。 ? setTimeout(fn, wait); }; } 源码已放到 github 上：https://github.com/clown-Jack/vue-scroll 总结 回顾一下上面的所想的，其实无限滚动也简单
2.5K40发布于 2020-09-21 - 来自专栏山河木马
js滚动加载（无限加载）（转）
实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。 因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。 2 当页面的内容很多，出现了滚动条。 （即滚动到了底部）
22.4K20发布于 2019-03-05 - 来自专栏Unity3d程序开发
UGUI Scrollrect滚动优化：无限循环利用
-SR_size.x / 2f, SR_size.y / 2f,0); conners[1] = new Vector3(SR_size.x / 2f, SR_size.y / 2f,0 ); conners[2] = new Vector3(-SR_size.x / 2f, -SR_size.y / 2f,0); conners[3] = new Vector3 设置panel的中心在左上角 mScroll.onValueChanged.AddListener(delegate { WrapContent(); });//添加滚动事件回调 startPos = mTrans.localPosition; } 1.得到显示区域的4个顶点的世界坐标 2.当产生滚动时，添加滚动委托 2.2 重置滑动面板大小 void UpdateRectsize 这样实现无限滚动。 demo地址 https://download.csdn.net/download/luoyikun/9556959 我设置的是1积分，但是下的人多了csdn会自己涨分
2.2K30编辑于 2023-08-24 - 来自专栏泽泽社
让Typecho无限滚动加载的方法
据统计，据媒体报道，据各种经验之谈：用户不喜欢点击，更爱滚动！所以，之前挺流行的文章分页没有了，沿用了几百年的“下一页”也被无限load取代。瀑布流和Twitter更是推动了无限load的普及。 这里介绍一个jQuery插件：Infinite AJAX Scroll，通过这个插件能快速实现无限滚动翻页。因为是jQuery所以到处都能用，这里我们以Typecho作为例子。
2.7K20编辑于 2023-04-17 - 来自专栏前端之巅
使用Ionic React实现的无限滚动效果
Ionic React 是今年新出的版本 官网 https://ionicframework.com/docs/react 开始之前 在我们创建一个无限滚动项目之前，我们需要一个 Ionic /src/pages/Tab1.tsx 当我们要实现无限滚动并因此要显示一个列表时，我们要做的第一件事情就是添加一个应包含项目的Stateful Value. const Tab1: React.FC = () => { useIonViewWillEnter(async () => { await fetchData(); }); }; 无限滚动 所以现在，我们要来实现无限滚动，首先，添加一个新的功能，该功能将帮助我们获取新的数据并且告诉滚动器该操作已经完成了。 await fetchData(); ($event.target as HTMLIonInfiniteScrollElement).complete(); } 最后，我们将Ionic的无限滚动组件导入
4.7K60发布于 2020-04-07 - 来自专栏前端皮小蛋
记一次 「 无限滚动 」列表优化
首先，原来无限滚动的逻辑就是基于scroll事件，通过不断滚动触发的回调，重新计算渲染到页面上的区间。 其次，为了动态调整可视区域的元素，使用了MutationObserver。 经过自测，仅仅是使用一个基础的Select，rc无限滚动的情况下同样发生了卡顿） 2. 下拉懒加载 基于 Intersection Observer 实现一个 下拉懒加载。 file=/index.js 动态演示： 选择方案 要么接受使用rc无限滚动的不够流畅； 要么使用 Intersection Observer 实现一个下拉懒加载的无限滚动效果 最终采用下拉懒加载。 ---- 总结 通常，无限滚动的方案可以分为两种： 1. 虚拟长列表 优点：可以保证渲染在页面上的dom元素尽可能少 缺点：如果没有特殊处理（比如rc或锁定滚动区域），快速滚动时，基本都会有闪动的情况（也就是本次的空白问题） 2.
4.2K20发布于 2020-12-08 - 来自专栏前端劝退师
90行代码，15个元素实现无限滚动
如何在React Hook中实现无限滚动。 如何正确渲染多达10000个元素的列表。 ? 无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。 无线滚动提供了一个高效的方法让用户浏览海量信息，而不必等待页面的预加载。 ? 如何构建一个体验良好的无限滚动，是每个前端无论是项目或面试都会碰到的一个课题。 早期的解决方案 关于无限滚动，早期的解决方案基本都是依赖监听scroll事件： function fetchData() { fetch(path).then(res => doSomeThing( 滚动元素内有大量DOM，容易造成卡顿。 ? 后来出现交叉观察者IntersectionObserver API ，在与Vue、React这类数据驱动视图的框架后，无限滚动的通用方案就出来了。 2. 原理 实现一个组件，可以显示具有15个元素的固定窗口大小的n个项目的列表： 即在任何时候，无限滚动n元素上也仅存在15个DOM节点。 ?
3.8K20发布于 2019-09-19 - 来自专栏前端之攻略
在el-table上使用无限滚动加载
console.log(this.isflag) },1000) } } } }; </script> 后来发现滚动到下面有时候会执行 = this.tableData.arr.concat(addData) } } this.lastTime = nowTime }, 滚动条滚动到顶部代码
5.8K10编辑于 2022-01-20 - 来自专栏前端到底怎么学好来
你知道前端怎么实现列表无限滚动吗？
（1）首先确定dom结构 第一层作为容器层(infinite-list-container)，目的是监听列表滚动，记录滚动位置scrollTop。 :translate3D(x,y,z)，这里的y指的是列表偏移量。 （2）监听数据 监听容器的scroll事件，获取滚动位置scrollTop 可视区域高度：screenHeight 列表每项高度：itemSize 列表数据：listData 当前滚动位置：scrollTop （3）确定需要的数据 滚动的位置：this. this.listData.length * this.itemSize; } // 偏移量对应的style get getTransform() { return `translate3d
1.4K10编辑于 2023-11-29 - 来自专栏前端小叙
纯css实现单张图片无限循环无缝滚动
07/03/css3-infinite-scroll.html 需求是一共有两个， 1、单张竖图持续向上无缝滚动， 2、单张竖图滚动到正中间之后，停留3s，继续滚动。 */ -webkit-animation: 3s scrollUp linear infinite normal;/* 3s持续滚动图片*/ animation normal;*/ /* 每停3s滚动一次*/ /*animation: 4s scrollUpAndPause linear infinite normal;*/ } 另外自己做好 注意： 1、前提是把一张图片复制成3张，以实现无缝滚动，网上看了很多人此类无缝循环滚动的方法，实现出来之后，每次回到起点都会有跳动的感觉，这里经过摸索，给动画上移的距离设为图片的高度，就不会有跳动问题了 ，完美无限循环+无缝滚动； 2、图片每停3s滚动一次，且每次刚好停在正中间，上线留的衔接的图片距离相等，这里就要计算一下，每次动画上移距离= 图片实际显示高度-（所在区域的总高度-上间距高度）。
4.9K30发布于 2020-03-13 - 来自专栏爬虫资料
社交媒体分析：破解无限滚动的技术实践
本方案所属技术分支二、传统采集痛点在处理无限滚动页面时，传统爬虫面临三大挑战：动态加载内容无法通过普通请求获取连续请求触发 IP 封锁的概率增加 75%数据完整性难以保证（仅能获取首屏 34% 的内容） 滚动加载模拟引擎通过 page 参数模拟滚动加载，获取完整数据。数据完整性校验算法采用三级校验机制（HTTP 状态码、数据字段校验、内容长度验证），确保数据完整性。 all_dataif __name__ == "__main__": crawler = WeiboHotSearchCrawler() hot_data = crawler.crawl(pages=3) 分页控制通过 page 参数模拟滚动加载。数据完整性保障采用三级校验机制（HTTP 状态码、数据字段校验、内容长度验证）。八、采集策略行为特征混淆随机化请求间隔（1.2s - 4.5s）。 异常熔断机制连续 3 次失败后自动休眠 300 秒。九、方案验证本方案已在多个商业分析系统中验证，日均处理请求量超过 2 万次，持续稳定运行超过 1 个月。
53200编辑于 2025-03-18 - 来自专栏CSDN博客专家-小蓝枣的博客
Vue组件滚动加载、懒加载功能的实现，无限滚动加载组件实例演示
效果图如下： 可以看到随着不断的滚动，页面组件的数量不断的加载。 其实加载的是后端返回的数据，因为涉及隐私，没有给显示出来。 利用懒加载，可以防止大量渲染造成卡顿降低用户体验。 window.addEventListener('scroll', this.rolling); 当检测滚动条滚到底部时，加载数据。 当滚动过的距离 + 可视区的高度 >= 滚动条长度时，就相当于滚动到了底部。 var scrollHeight = document.documentElement.scrollHeight // 当滚动过的距离+可视区的高度>=滚动条长度时， var scrollHeight = document.documentElement.scrollHeight // 当滚动过的距离+可视区的高度>=滚动条长度时，
6.2K50编辑于 2023-02-26 - 来自专栏编程微刊
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码，效果如下，多用于pc端电商网站之中不断的循环更新的公告消息。 ? 写一个简单的小demo： <! width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>基于jQuery的公告无限循环滚动实现代码 translateY(0); } .animate { -webkit-transition: all .3s
5.2K20发布于 2018-12-21 - 来自专栏静Design
【交互探讨】无限滚动还是分页展示，这是个问题！
然而，在您意识到之前，您可能会想无限滚动是否是一个不错的选择，因为您拥有非常独特的用例。那么无限滚动真的是个好主意吗？好吧，我们都对无限滚动通常有着强烈的不是很好的看法，而这也有很多很好的理由。 无限滚动存在的问题 无限滚动的问题是众所周知的， 最明显的一个是页面上的大量选项，这些选项通常过于庞大且难以管理， 这真就感觉像是淹没在一个看不到尽头的信息深渊中。 这是否意味着我们可以完全放弃无限滚动？并不是这样的。无限滚动最大的优势是显示结果的速度——当用户想要查看更多内容时才直接显示新项目。事实证明，有一些技巧和策略可以让无限滚动变得更好。 例如，一旦用户浏览了“页面”1、2 和 3，现在已经登陆“页面”4，是否应该单击“返回”按钮将他们从第4页带到第3页，或者到他们在第1页之前访问过的上一页 ？ 此外，我们仍然需要实现无限滚动，以确保键盘的可访问性并宣布新项目。但是：我们利用了无限滚动提供的所有好处：尤其是浏览速度。 现在，所有这些似乎都是为了让无限滚动更好。
5.3K20编辑于 2022-05-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号