jQuery上拉加载

刺骨的言语ヽ痛彻心扉 2023-07-03 04:46 1阅读 0赞

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

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

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

代码步骤

1.页面布局

接下来就是写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>

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

[http_dt2008.cn_p_126]: http://dt2008.cn/?p=126
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200202122343711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTQzNzQ4,size_16,color_FFFFFF,t_70