h5列表上拉加载（内有监控滚动距离代码）

简介

以个人排行榜为例，每次获取一页（假如一页有10个人），当滚动到底后获取下一页内容，内容由后台返回

样式如下：

开始先获取第一页

• ajax获取后台返回值
• 传值：
  • 分页页数page
  • 每页数量length

getRank(1, 10) ;
	
function getRank(page, length) {
    $.ajax({
        type: "POST",
        url: "对应的接口",
        data: {
            'page': page,
            'length': length
        },
        dataType: "json",
        success: function(data) {	
			appendPersonal(data, page, length);
            console.log(data);
        }
    });
}

• 返回值格式如下，这里可以看到，一共有31个人，第一次返回第一页的10个人，以此类推
  

对返回值进行操作

let personalScrollTop,//当前的滚动距离
	personalPage,//当前加载到第几页
	personalLength,//每一页的长度
	isCanAppendPersonal = true;//滚动超过设定距离后加载下一页（设置开关防止无限次加载下一页）
	
// 个人排行榜返回值处理
function appendPersonal(data, page, length) {
	let list = data.list;
		personalPage = page,
		personalLength = length,
		isCanAppendPersonal = true;
		console.log('personalPage : ' + personalPage, 'personalLength : ' + personalLength);
	
	// 往排行榜里填内容	
	for (let i = (page - 1) * length; i < page * length; i++) {
		
		let realNum = i - (page - 1) * length;
		
		//这里有排名、头像、昵称和助力值，具体的可根据自己需要改变
		$('.Plist_main_listPersonal').append('<div class="Plist_main_list_content Plist_main_listPersonal_content">' +
			'<div class="pmlt_1">NO.' + (i + 1) +'</div>' +
			'<div class="pmlt_2">' +
				'<div class="pmlt_2_head mod_center mod_center1">' +
					'<div class="pmlt_2_head_imgBox mod_center mod_center1">' +
						'<img class="p1hi_img" src="' + list[realNum].headimgurl + '" alt="">' +
					'</div>' +
				'</div>' +
			'</div>' +
			'<div class="pmlt_3">' + list[realNum].nickname + '</div>' +
			'<div class="pmlt_4">' +
				'<div class="pmlt_4_personalElem"></div>' +
				'<div>' + list[realNum].tasks_count*2 + '</div>' +
			'</div>' +
		'</div>');
		
		//一二三名有小王冠
		if((i+1) == 1) {
			$('.Plist_main_listPersonal_content:nth-child(' + (i + 1) + ') .pmlt_2_head').append('<img class="p1hi_hat" src="./img/list/elem_personal_hat1.png" alt="">');
		} else if((i+1) == 2) {
			$('.Plist_main_listPersonal_content:nth-child(' + (i + 1) + ') .pmlt_2_head').append('<img class="p1hi_hat" src="./img/list/elem_personal_hat2.png" alt="">');
		} else if((i+1) == 3) {	
			$('.Plist_main_listPersonal_content:nth-child(' + (i + 1) + ') .pmlt_2_head').append('<img class="p1hi_hat" src="./img/list/elem_personal_hat3.png" alt="">');
		}
	}
}
	
//个人排行榜滑动到每一页最后时加载下一页
$('.Plist_main_listPersonal').scroll(function() {
	personalScrollTop = $(this).scrollTop();
	// console.log('personalScrollTop : ' + personalScrollTop);
	
	//当滚动到最后一个时加载下一页（在样式里，一页显示3个，所以要减3，每个内容高46px，所以要*46，滚动到最后能滚动的最后一个时加载，所以再减46）
	if (personalScrollTop >= (personalPage * personalLength - 3)*46 - 46) {
		if(isCanAppendPersonal) {
			getRank(personalPage + 1, personalLength) ;
			isCanAppendPersonal = false;
		}
	}
});