js实现无限滚动滚动到底部加载新数据

最新推荐文章于 2024-07-16 17:26:59 发布

原创最新推荐文章于 2024-07-16 17:26:59 发布 · 656 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

28 篇文章

订阅专栏

本文展示了如何使用HTML5和JavaScript实现底部无限滚动效果。通过监听滚动事件，当用户接近页面底部时，动态加载更多数据。代码中使用了简单的表格展示作为例子，演示了如何添加新条目并隐藏加载指示器。该实现适用于前端开发中的数据分页和动态加载场景。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
	//<link rel="stylesheet" href="css/bootstrap.min.css">
    //<link rel="stylesheet" href="sui-mobile/dist/css/sm.min.css">
	//<link rel="stylesheet" href="sui-mobile/dist/css/sm-extend.min.css">
	<script src="sui-mobile/_site/assets/js/jquery.min.js"></script>
</head>
<body style="background-color: #fff;margin: 0; overflow: auto;">
	<header class="bar bar-nav">
	          <h1 class="title">底部无限滚动</h1>
	      </header>
				<table id="xztb" class="table" style="margin-top: 100px;">
					<tr style="background-color: #f1f1f1;border-bottom: 1px solid #f1f1f1;">
						<th style="white-space: nowrap">品名</th>
						<th style="white-space: nowrap">库存</th>
						
					</tr>
					<tbody id="showtable" >
					<!-- <tr><td><div class="no">暂无数据</div></td></tr> -->
					</tbody>
				</table>
				<div class="infinite-scroll-preloader">
				    <div class="preloader"></div>
				</div>
				
	</body>
	//<script src='sui-mobile/dist/js/sm.js'></script>
	<script type="text/javascript">
		
		$(".infinite-scroll-preloader").hide()
		
		// 最多加载的条数
		      var maxItems = 100;
		
		      // 每次加载添加多少条目
		      var itemsPerLoad = 20;
			  
			  
			  function add(number,lastIndex){
				  console.log(number)
				  console.log(lastIndex)
				  var html = '';
				                for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
				                    html += '<tr class="len"><td >'+i+'</td></tr>';
				                }
				                // 添加新条目
				                $('#showtable').append(html);
			  }
			  add(itemsPerLoad,0)
			        // 上次加载的序号
			        var lastIndex = 20;
		window.onscroll = function() {        
			
			//变量scrollTop是滚动条滚动时，距离顶部的距离        
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;        
			//变量windowHeight是可视区的高度        
			var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;        
			//变量scrollHeight是滚动条的总高度        
			var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;        
			//滚动条到底部的条件        
			if (scrollHeight - (scrollTop + windowHeight) < 1) { 
				
				if (lastIndex >= maxItems) {
					console.log("没数了")
				    return false;
				}
				//写后台加载数据的函数          
				// console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);   
					 $(".infinite-scroll-preloader").show()
					 console.log("出现转圈")
					 add(itemsPerLoad,lastIndex)
					 lastIndex = $('.len').length;
					 $(".infinite-scroll-preloader").hide()
					 console.log("关闭转圈")
					 
					 
				}    
			
		}
		
	</script>
	<style type="text/css">
	      .infinite-scroll-preloader {
	        margin-top:-20px;
	      }
	</style>
	
</html>