pc端页面滚动到底部加载更多数据......

最新推荐文章于 2023-11-22 17:46:02 发布

weixin_33727510

最新推荐文章于 2023-11-22 17:46:02 发布

阅读量2.3k

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/Cubicluo/blog/857970

版权

2019独角兽企业重金招聘Python工程师标准>>>

场景：pc端页面鼠标滚动到底部时，通过ajax加载更多的数据，实现分页功能，封装成了一个函数，自己根据实际情况调用即可。

说明：discussList是放加载内容的div容器

// 加载更多评价的函数
function loadMore(){
	$(".discussList").append('<div class=loading style=display:none;text-align:center;height:30px;line-height:30px;background:#fff;>加载中...</div>');//插入加载中的提示框
	var stop = true; //默认停止加载
	// 页数
	var page = 0;
	// 每页展示5个
	var size = 5;
	var bottomH=50;//距离底部多少像素开始加载
	$(window).scroll(function() {

		totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()+bottomH);
		if ($(document).height() <= totalheight) {
			if (stop == true) {
				stop = false;
				$(".loading").show();//显示加载中提示
				$.ajax({
					url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
					type: 'GET',
					contentType: "application/json; charset=utf-8",
					dataType: "json",
					success: function(data) {
						var dateLength = data.length; //数据长度
						if (dateLength > 0) {
							$(".loading").before('<div class=list><p class=listP1> <strong>132***313</strong> <img src=../img/xing3.png alt> <img src=../img/xing3.png alt> <img src=../img/xing3.png alt> <img src=../img/xing3.png alt><img src=../img/xing4.png alt><span>2017-12-26 13:20</span></p><p class=listP2>好吃，一直吃他家的</p></div>')
							$('.loading').hide();
							page++;
							stop = true;
						} else {
							$(".loading").text("暂无数据")
						}
					},
					error: function(xhr, type) {
						$(".loading").hide();
						alert("ajax error!");
					}
				});
			}

		}
	});
}

转载于:https://my.oschina.net/Cubicluo/blog/857970