需求:
在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页底部自动加载下一页并发加载埋点。实现:
首先理解三个概念,分别是contentH,viewH,scrollTop。内容的高度,包括可见部分以及滚动条下面的不可见部分。
包括可见部分也不包括滚动条下面的不可见部分。
底部,此时scrollTop为1700,所以这个1700也可以理解为滚动条可以滚动的长度。当滑动条拉到底部的时候,contentH=viewH+scrollTop。
故可实现如下:
显示的总长度
var flag = showLength <= 10 ? showLength : 10;
load_records(0,flag);//开始加载第一页
hxmClickStat('mar_all_207_ssjk.goumai.load.' + 1,{url_ver: "SJCGBS-10030"});//不论长度是否超过10都发送第一页埋点
if (showLength > 10) {
var origin = 1,load = 2;
$('.records_body').scroll(function () {
var contentH = $(this).get(0).scrollHeight;
var viewH = $('.records_body').height();
var scrollTop = $(this).scrollTop();
var pages = Math.ceil(showLength / 10);//需要显示的总页数
if (viewH + scrollTop == contentH && load <= pages) {
if (load * 10 < showLength) {
load_records(origin++ * 10,load++ * 10);//加载下一页的10条数据
hxmClickStat('mar_all_207_ssjk.goumai.load.' + origin,{url_ver: "SJCGBS-10030"});//滑动到底部开始加载下一页时发送埋点
} else {
load_records(origin * 10,showLength);//加载最后一页
hxmScrollBottomStat('mar_all_207_ssjk.goumai.bottom',{url_ver: "SJCGBS-10030"});//最后一页发送埋点
load++;//避免重复执行
}
\n\<' +
'div class="buyer_address">\n\<' + 'p class="buy_time">' + accure_time + '