js无限下拉滚动（完整版）

最新推荐文章于 2024-03-12 18:25:16 发布

zhangzuruiqqq

最新推荐文章于 2024-03-12 18:25:16 发布

阅读量813

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zhangzuruiqqq/article/details/115767499

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!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 noMore= true
		// 最多加载的条数
		      var maxItems = 0;
		
		      // 每次加载添加多少条目
		      var itemsPerLoad = 30;
			  var  page = 1
			  function add(number,lastIndex,page){
				  // console.log("未执行时"+page)
				   $(".infinite-scroll-preloader").show()
				  $.ajax({
				  	//请求方式
				  	type: 'POST',
				  	//发送请求的地址
				  	//我这里的地址是不需要传数据的，所以没有拼接参数
				  	url: '',
				      //服务器返回的数据类型
				      data:{
				  		page: page,
				  		limit: itemsPerLoad,
				  		Name: "",
				  		batch_number: "",
				  		house_id: "gv0TyZhOvFlq0Ci08v",
				  		cargo_owner: "",
				  		area_id: "",
				  		location_code: "",
				  		start: "",
				  		end: ""
				  	},
				  	//请求成功的处理
				  	success: function(data) {
				  		console.log(data)
				  		$(".infinite-scroll-preloader").hide()
				  		var str=""
				  		if (data[0] == undefined){
				  			str='<div class="no">暂无数据</div>'
				  		}else{
							
						  for (var i = 0; i <data[0].length ; i++) {
							  str +=  `<tr class='len'><td class='Tradename'>`+data[0][i].Tradename+`</td><td>`+data[0][i].location_code+`</td></tr>`
						  }
							
				  		}
				  		
				  		$('#showtable').append(str);
						maxItems= data[1]
						page =page+1
						// console.log("执行完ajax"+page)
				  	},
				  	error: function(err) {
				  		$.toast('接口请求失败');
				  					console.log("查询包装类型失败了" + err);
				  				
				  	}
				  });
				                
			  }
		add(itemsPerLoad,0,page)
			        // 上次加载的序号
			        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) { 
				
				lastIndex = $('.len').length;
				console.log("lastIndex"+lastIndex)
				console.log("maxItems"+maxItems)
				if (lastIndex >= maxItems) {
					console.log("没有更多了")
					if(noMore){
						$('#showtable').append('<tr class="noMore"><td colspan="2">没有更多了</td></tr>');
						noMore=false
						console.log("加入提示")
					}else{
						console.log("已存在")
					}
				    return false;
				}
				//写后台加载数据的函数          
					 page=page+1
					 add(itemsPerLoad,lastIndex,page)
				}    
			
		}
		
	</script>
	<style type="text/css">
	      .infinite-scroll-preloader {
	        margin-top:-20px;
	      }
		  .noMore{
			  text-align: center;
			  color: yellowgreen;
		  }
	</style>
	
</html>

https://sui.thinkadmin.top/
用到组件库大家可以去下载

zhangzuruiqqq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js无限下拉滚动（完整版）

<!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=
复制链接

扫一扫