前端页面实现滚动加载数据的案例

最新推荐文章于 2024-07-29 07:54:54 发布

永远的幸福a

最新推荐文章于 2024-07-29 07:54:54 发布

阅读量8.5k

点赞数

分类专栏：前端文章标签： jquery 分页前端

本文链接：https://blog.csdn.net/u011431550/article/details/43033469

版权

本文介绍了前端页面如何实现滚动加载数据，通过结合分页原理，详细解析了相关代码实现，并提供了案例下载链接。

摘要由CSDN通过智能技术生成

1、我们在项目中经常会有这样的需求就是需要滚动加载数据；

2、原理利用分页的原理即可实现；见下面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>滚动条滚动加载</title>
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript">
		
			$(function(){
            	init();
            });
		
			//定义几个全局变量
            var currPage = 1;
            var currPageSize = 10;
            var recordCount = 0;
            
            function init(){
            	var para={};
            	//默认加载第一页
				dataBody(para);
				if(currPage==1){
					//清空数据
					$("#context").html(&