无限滚动加载

最新推荐文章于 2024-05-04 20:41:55 发布
最新推荐文章于 2024-05-04 20:41:55 发布
阅读量133 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kgcwuli/article/details/101175241
版权

准备：
json文件(模拟数据)
html(有滚动条)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			*{ padding: 0; margin: 0;}
			ul{
				width: 80%;
				margin: 0 auto;
				overflow: hidden;
			}
			li{
				list-style: none;
				width: 50%;
				float: left;
				padding: 10px;
				box-sizing: border-box;
			}
			li img{ width: 100%;}
		</style>
	</head>
	<body>
		<div style="width: 100%; height: 400px; background: #0177A7;"></div>
		<ul>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
			<li><img src="img/g1.jpg" alt=""><p>11111111111</p></li>
		</ul>
		<button id="more">..................</button>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
			var load = false;//判断是否加载成功 可以加载
			var indexNum = 0, allLen;//当前加载json页数，json长度
			$(window).scroll(function(){
			    if(load) return; //不能加载
			    var dh = $("body").height();
			    var wh = window.screen.height ;
				//console.log(dh-wh-30,$(this).scrollTop())
			    if( $(this).scrollTop() >= dh-wh-30){
					console.log("aa")
			        load = true;
			        var param = '';//加载html变量
			        $.post("js/json.js",function(data){
						console.log(data)
			            allLen = data.length;//获取json长度
			            var data1 = data[indexNum];
			            var dlen = data1.length;
			            for(var j=0;j<dlen;j++){
			               $("ul").append($('<li><img src="'+data1[j].img+'" alt=""><p>'+data1[j].text+'</p></li>'))
			            }
			            indexNum++;
			            load = false;
			            if(indexNum>=allLen){
			                load = true;
							 $("#more").html("没有更多数据");
			            }else{
			                $("#more").html("向下拉加载更多");
			            }
			        },"json");
			    }
			});
		</script>
	</body>
</html>
吴莉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Infinite-Scroll无限滚动加载数据
08-11
NULL 博文链接：https://hjl87423050.iteye.com/blog/2232973
无限加载
gou553323的博客
03-18 247
虽然使用过很多的feed流产品了，但是无限加载这个名词还是第一次听 概念 分析朋友圈分页，按照时间倒序查10条，查出来数据后按照权限过滤，比如什么拉黑，删除等等，这样的话，返回给客户端的数据和分页数量不一致，但是我个人认为应该是这样的，而不是把各种权限信息和动态表连接起来查询，然后可以返回固定数量的动态，大厂肯定不会这么做，权限信息和动态信息不是一个数量级，不能连表，微博也有佐证： https://open.weibo.com/wiki/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%B8%
前端实现无限加载的原理
最新发布
Mi_Ni_BoX的博客
05-04 195
就是监听列表区域有没有滑动到底，用el-Infinite Scroll 无限滚动来实现，如果加载到底触发事件，在事件里面做出调整，重新发送请求，将请求回来的数据加在之前请求回的数据后面做拼接，这里建议用 数组=[ ...arr1，...arr2 ]（数组的扩展运算符来做拼接），随后对触发加载事件做出判断。用上面的disabled来控制加载事件是否触发。
数据无限加载
Ifenglala的博客
05-31 121
目的：实现结果区域商品展示。 大致步骤： 完成结果区域商品布局 完成 shop-infinite-loading组件封装 使用 shop-infinite-loading完成数据加载和渲染 落地代码：src/views/category/sub.vue 基础布局 <template> <div class='sub-category'> <div class="container"> <!-- 面包屑 --> ...
瀑布流+无限滚动加载数据
08-14
NULL 博文链接：https://nbczw8750.iteye.com/blog/2316765
页面无限加载
yy_cly的博客
11-08 707
无限加载页面 上拉下拉都有对应的ajax方法，下拉刷新，上拉加载更多 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %><%@include file="../taglib.jsp" %><html> <link rel="stylesheet" href
实现无限加载功能
weixin_53198972的博客
04-25 293
无限滚动功能通常是通过监听滚动事件，并在用户滚动到页面底部时自动加载更多内容来实现的。通过滚动区域高度+可视区域高度>=文档总高度来判断是否用户滑动页面时是否已经触底。若已触底则发送请求加载新内容。首先，你需要在HTML中设置一个容器来显示内容，还可以设置一个等待加载新内容时的动画（初始时可能是隐藏的）。
列表无限加载
12-02
列表无限加载
JavaScript实现列表无限加载
weixin_34387284的博客
05-22 392
起因 之前自己在使用这种网站时，经常看到无限加载的效果。今天正好看到了getBoundingClientRect这个Api，就想着试试看如何实现Infinite scroll的效果。 原理 在需要无限加载的列表底部，埋下一个隐藏元素。当不断滑动时，隐藏元素将出现在视窗(viewport)里，也就意味着当前浏览的列表已经到底部了。这时候就需...
H5刷新加载无限加载
11-17
H5刷新加载无限加载 前端
jQuery无限滚动加载图片瀑布流代码.zip
07-04
jQuery无限滚动加载图片瀑布流代码基于jquery-2.0.3.js制作，自适应屏幕分辨率，鼠标滚动图片无限加载。
Vue实战篇三十二：实现新闻的无限加载
我的博客
07-20 1360
1、在新闻列表中引入无限滚动加载功能，并关联自动加载方法。3、向接口获取数据成功后，重新渲染新闻列表。2、在底部放入加载条，显示。
基于JavaScript开发无限滚动加载功能
xiaoerbuyu1233的博客
01-29 550
本文介绍了使用JavaScript实现无限滚动加载功能的基本原理，并提供了一个简单的代码示例。无限滚动加载是一种常见的网页加载方式，可以在用户滚动到页面底部时自动加载新内容，避免了用户频繁点击“下一页”按钮或者刷新页面的麻烦。需要注意的是，为了确保用户滚动到页面底部时能够正确触发加载操作，我们给content元素设置了一个较长的margin-bottom值，以便在页面滚动到底部时触发滚动事件。实现无限滚动加载的基本原理是通过监听页面滚动事件，检测用户是否滚动到了页面的底部，然后触发相应的加载新内容的操作。
Vue 简易版无限加载组件实现原理
小陈的博客
08-19 451
遇到的两个问题：scroll 事件不触发、如何将 loading 状态放在无限加载组件中进行管理。无限加载组件在展示列表页数据时比较常见。特别是在 H5 列表页中，数据比较多，需要做分页，无限加载组件就是一个非常好的选择。当列表页数据比较多时，一次性从服务端拿到所有的数据会比较耗时，长时间不展示列表数据，比较影响用户体验。所以对于一般的长列表数据，都会做分页。首次请求时，只请求第一页数据；当用户上拉即将到达列表底部时，再请求下一页数据，将下一页数据拼接在之前的列表后。
滚动加载（无线滚动）
WBL612195的博客
11-01 1052
滚动加载事件(无限滚动)
jQuery无限循环滚动出现的问题
qq_42193934的博客
06-21 452
1.问题描述：鼠标离开后，滚动速度减慢。 原因：一个周期滚动1600px，时间周期为10s，鼠标离开后，继续完成该周期内剩余滚动距离，此时仍然花费10s，滚动速度必然减慢。 解决办法：按照比例，算出剩余滚动距离需要花费的时间。 2.解决以上问题出现新问题：新周期的滚动速度又突然加快。 原因：新周期的动画执行时间参数没有值 解决办法：设置默认值，run(time = 10000) （单位：ms） ...
Vue中如何进行滚动加载与无限滚动？
it_xushixiong的博客
06-12 4588
在Vue中，我们可以使用vue-infinite-loading插件和Intersection Observer API来实现滚动加载和无限滚动。使用vue-infinite-loading插件非常简单，只需要使用它提供的API即可。使用Intersection Observer API需要一些JavaScript基础知识，但它的性能更好，适用于复杂的Web应用程序。无论使用哪种方法，我们都需要注意滚动加载和无限滚动可能会影响页面性能和用户体验，所以需要谨慎使用。
PC端滚动加载更多的实现方法
qq_41038929的博客
04-26 4912
//滚动加载更多 var pullRefreshss = true; $(window).scroll( function () { /*当前滚动条到顶部的距离*/ var top = $(document).scrollTop(); /*当前浏览器的可是高度*/ var height = document.body.clie...
el-select无限滚动节流加载数据
10-26
1. 设置属性v-infinite-scroll，指定无限滚动加载的方法。 2. 设置属性popper-append-to-body，将下拉框的父元素设置为body，以便实现无限滚动。 3. 设置属性debounce，指定节流时延，单位为ms。 4. 设置属性element...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值