pc端页面滚动到底部加载更多数据(瀑布流加载)

阅读 1099

场景: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://www.bangbangdao.com/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!");
					}
				});
			}
 
		}
	});
}
文章来源:网络 版权归原作者所有,如涉及知识产权问题,请权利人联系我们,我们将立即处理.
标签:
专栏:   前端经验分享
偷得浮生半日闲
文章 6 获得 0个赞 共 0个粉丝

推荐阅读 更多精彩内容