jQuery上拉加载

最新推荐文章于 2022-05-18 22:17:08 发布

东泰丶

最新推荐文章于 2022-05-18 22:17:08 发布

阅读量330

点赞数

分类专栏： Web前端

原文链接：http://dt2008.cn/?p=126

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原文链接：http://dt2008.cn/?p=126
在页面中，做分页小编只知道两种，一种是上一页下一页的，另外一种就是上拉加载，这个上拉加载的功能的是比较常用的，在移动端经常用到的，上一页下一页这种机制呢是在PC端网站很常见的。

思路是这样的，比较简单容易理解哈

首先定义个页数器(计步器，从1开始)
Ajax请求第一页的数据(封装成方法，减少代码量)
在ajax请求参数调用页数器(计步器，从1开始) ，注意：从接口中调用也行
最后一步就是判断是否拉到底部，如果拉到底部那么页数器自增，并且再调用ajax的方法这里是引用

代码步骤

1.页面布局

<style>
	* {
		margin: 0;
		padding: 0;
		background:#e6e3e3;
	}

	.list{
		margin:10px auto 0;
		width:94%;
		background:#fff;
		border-radius: 5px;
	}

	.list-top{
		width:96%;
		padding:2%;
		border-radius: 5px;
		background:#fff;
	}

	.list-top img{
		width:100%;
		border-radius: 5px;
	}

	.list-title{
		background:#fff;
		padding:3% 2%;
		border-radius: 5px;
	}
	
</style>

<div class="list_quan">
	<div class="list">
		<div class="list-top">
			<img src="https://frbkw.com//wp-center/uploads/2020/01/1580107577-80645b67ffdb778.jpg">
		</div>
		<div class="list-title">uni-app如何完美解析富文本内容</div>
	</div>
</div>
<div style="width:100%; text-align:center; margin:5px 0; font-size:15px;">正在加载。。。</div>

接下来就是写js了

2.定义个页数器和定时器(预防被疯狂刷新)

    //定义数据的页数
    page = 1;
    //定义空的定时器
    timers = null;

3.写ajax请求注意:接口小编是用枫瑞博客网的列表接口

//定义ajax的方法
function load(){
	$.ajax({
		url:"https://www.frbkw.com//wp-json/wp/v2/posts",
		data:{
			page:page
		},
		success:(res)=>{
			console.log(res);
			let html = "";
			for(let i in res){
				html += '<div class="list">'
				html += '<div class="list-top">'
				html += '<img src="https://frbkw.com//wp-center/uploads/2020/01/1580107577-80645b67ffdb778.jpg">'
				html += '</div>'
				html += '<div class="list-title">'+res[i].title.rendered+'</div>'
				html += '</div>'
			}
			$(".list_quan").append(html);
		}
	})
}

4.判断是否到达底部

$(window).scroll(() => {
	// 判断如果 设备高度 + 当前滚动条高度 + 60 > 整个文档高度
	if($(window).height() + $(window).scrollTop() + 60 > $(document).height()){
		//清除计时器
		clearTimeout(timers);
		// 这里写个定时器,免得疯狂加载
		timers = setTimeout(function(){
			//自增页数器
			page ++;
			//调用请求方法
			load();
		}, 1000);
	}
});

大致就这样了，完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>jQuery上拉加载</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
			background:#e6e3e3;
		}

		.list{
			margin:10px auto 0;
			width:94%;
			background:#fff;
			border-radius: 5px;
		}

		.list-top{
			width:96%;
			padding:2%;
			border-radius: 5px;
			background:#fff;
		}

		.list-top img{
			width:100%;
			border-radius: 5px;
		}

		.list-title{
			background:#fff;
			padding:3% 2%;
			border-radius: 5px;
		}
		
	</style>
</head>
<body>
	
	<div class="list_quan">
		<div class="list">
			<div class="list-top">
				<img src="https://frbkw.com//wp-center/uploads/2020/01/1580107577-80645b67ffdb778.jpg">
			</div>
			<div class="list-title">uni-app如何完美解析富文本内容</div>
		</div>
	</div>
 	<div style="width:100%; text-align:center; margin:5px 0; font-size:15px;">正在加载。。。</div>

</body>
<script>
	$(document).ready(function(){
		//定义数据的页数
		page = 1;
		//定义空的定时器
		timers = null;
		load();
		$(window).scroll(() => {
			// 判断如果 设备高度 + 当前滚动条高度 + 60 > 整个文档高度
			if($(window).height() + $(window).scrollTop() + 60 > $(document).height()){
				//清除计时器
				clearTimeout(timers);
				// 这里写个定时器,免得疯狂加载
				timers = setTimeout(function(){
					page ++;
					load();
				}, 1000);
			}
		});
		//定义ajaxd的方法
		function load(){
			$.ajax({
				url:"https://www.frbkw.com//wp-json/wp/v2/posts",
				data:{
					page:page
				},
				success:(res)=>{
					console.log(res);
					let html = "";
					for(let i in res){
						html += '<div class="list">'
						html += '<div class="list-top">'
						//枫瑞博客网 的接口没有图片展示，就定义了静态图片
						html += '<img src="https://frbkw.com//wp-center/uploads/2020/01/1580107577-80645b67ffdb778.jpg">'
						html += '</div>'
						html += '<div class="list-title">'+res[i].title.rendered+'</div>'
						html += '</div>'
					}
					$(".list_quan").append(html);
				}
			})
		}
	})
</script>
</html>

页面效果(枫瑞博客网的接口没有图片展示，就定义了静态图片)
在这里插入图片描述
希望这边文章对您有帮助！

东泰丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery上拉加载

原文链接：http://dt2008.cn/?p=126在页面中，做分页小编只知道两种，一种是上一页下一页的，另外一种就是上拉加载，这个上拉加载的功能的是比较常用的，在移动端经常用到的，上一页下一页这种机制呢是在PC端网站很常见的。思路是这样的，比较简单容易理解哈首先定义个页数器(计步器，从1开始)Ajax请求第一页的数据(封装成方法，减少代码量)在ajax请求参数调用页数器(计步器，...
复制链接

扫一扫