原生js - 触底加载

最新推荐文章于 2024-07-06 10:13:31 发布
最新推荐文章于 2024-07-06 10:13:31 发布
阅读量2.4k 收藏 4
点赞数
分类专栏： 面试知识网 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiannverhaha/article/details/122684027
版权
本文介绍了如何使用原生JavaScript实现页面触底时的加载功能。内容包括触底条件的判断逻辑，如：scrollTop + clientHeight >= scrollHeight，以及在添加loading提示时避免重复触发触底事件的技巧。
摘要由CSDN通过智能技术生成

  1. 触底的条件：
    if (scrollTop + clientHeight >= scrollHeight)
    // 页面滑上去的不可见高度 + 除去滚动条的屏幕可见高度 >= 整个页面的高度

  2. scrollTop、 clientHeight、scrollHeight的区别：
    请添加图片描述

  3. 加loading的注意事项：
    不要用if使得loading这个div节点时有时无，因为这样会再次触发“触底条件”，可以这样：

 <div 
     className="flex-double-center" 
     style={
   {
    height: 100, visibility: loading
最低0.47元/天 解锁文章
ToBeStronger 66
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现滚动条触底加载更多
10-16
主要介绍了JS滚动条触底加载更多,需要的朋友可以参考下
Vue下滚动到页面底部无限加载数据的示例代码
08-27
该示例代码将涵盖 Vue 的生命周期、axios 的简单用法、moment.js 格式化日期、图片懒加载、结合原生 js 来写 scroll 事件等技术要点。 1. Vue 生命周期 在 Vue 中，我们可以使用生命周期钩子函数来管理组件的生命...
js触底加载
qq_47243637的博客
01-08 533
js触底加载
触底加载的两种思路(以vue3前端和nodejs后端为例)
最新发布
wth0212的博客
07-06 226
总条数用来作为判断是否有数据的条件,也可以不用,注意看下文。
原生js的触底加载
qq_36893984的博客
02-20 559
function getDocumentTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document.body) { bodyScrollTop = document.body.scrollTop; } if ...
js滚动条触底加载更多#js懒加载数据#步骤条布局懒加载
weixin_44524243的博客
07-28 1904
不浪费大家时间，兄弟们先看效果图，如果是你们想要的就看，不是想要的效果就去下家....这次实现的是步骤条式的懒加载效果，滚动条到底实现触发接口；说加载前先说下步骤条样式的实现思路，具体代码有点杂，有需要的可以留言dd思路div不浮动竖排排列，或者用flex布局的纵向轴，第一层的每个div上下紧靠这里不可以用magin-top和button，然后设置个border-left或者border-right样式，这时一条不间断长线就会形成，然后设置圆圈;cssless或scss。...
基于wepy开发的微信小程序loading加载动画组件
08-10
`基于wepy开发的微信小程序loading加载动画组件`是这样的一个工具，它利用JavaScript的动态特性，结合微信小程序的API，为用户提供了一种优雅的方式来显示等待加载的状态。Wepy是一款强大的微信小程序框架，它提供了...
vue2滚动条加载更多数据实现代码
08-31
在Vue2中，我们可以使用原生JavaScript或者jQuery来监听滚动事件。以下是使用jQuery的一个例子： ```javascript created () { var self = this; $(window).scroll(function () { let scrollTop = $(this)....
滚动条的监听与内容随着滚动条动态加载的实现
08-31
本文将详细解释如何使用原生JavaScript和jQuery来实现这一功能。 ### 滚动条监听原理 滚动条监听的原理是监听窗口或容器的滚动事件。当用户滚动到容器的底部时，会触发一个事件，通过编程逻辑判断是否需要加载更多...
移动端实现上拉加载下拉刷新
10-17
在移动平台，如iOS和Android，开发者可以利用原生的滚动视图组件，如iOS的`UITableView`或`UICollectionView`，Android的`RecyclerView`，并结合各自的滚动事件监听机制来实现。对于跨平台框架，如React Native、...
JS 原生实现触底加载
wu_2004的博客
10-13 324
监听滚动事件，当滚动接近底部时触发加载更多操作。加载更多数据后，将新数据附加到容器中。创建一个容器来存储列表项。
JS实现滚动触底实现（附：PC端滚动分页加载数据）
qq_44741577的博客
02-01 1641
实时去获取位置信息稍微会损耗性能，我们应该把不变的缓存起来，只实时获取可变的部分。往下的区域是符合条件的，会导致一直触发，这不是我们想要的。例子我会使用vue来实现，和原生实现是一样的。如果你做过小程序，这和。声明一个离底部的距离变量。时成功触发事件，但由于。
使用 js 原生 API IntersectionObserver实现内容触底加载
landiyaaa的博客
09-21 666
使用IntersectionObserver，在react hook 框架下实现下拉列表的无限滚动加载。
原生js实现触底加载下一页(2不引用VUE)
weixin_44622241的博客
09-22 359
定义一个scroll容器 <body> <div id="app"> </div> </body> javascript var data =[1, 2, 3, 4]; function render() { document.getElementById('app').innerHTML = ''; let tempHtml = '' data.forEach(item => { tempHtml
js滑动框触底加载
l_____z______z的博客
12-26 322
js滑动框触底加载。
原生js实现触底加载下一页
weixin_44622241的博客
09-22 854
简单的布局 <div id="app" class="container"> <div class="block" v-for="(item, index) in blocks" :key="index"> {{item}} </div> </div> js需要先引入vue <script src="https://cdn.jsdelivr.net/npm/vue"></script&
触底加载
weixin_45888412的博客
04-28 107
触底加载 // 执行触底加载 data(){ return{ fnThrottle: true, } }, mounted() { this.onBotton(); }, onBotton() { let _this = this; window.onscroll = function() { //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop || document.body.
下滑加载更多js_JS实现滚动条触底加载更多
weixin_39925031的博客
12-20 379
原理1.通过监听滚动区域DOM的scroll事件, 计算出触底// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight2.触底后触发列表添加, 列表添加使用createDocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值