需求：在app落地页上的底部位置显示此前其他用户的购买记录，要求此div盒子只显示3条半，但一页有10条，div内的滑动条滑到一页底部自动加载下一页并发加载埋点。
实现：首先理解三个概念，分别是contenth，viewh，scrolltop。
contenth:即所要滑动的元素内容的高度，包括可见部分以及滚动条下面的不可见部分。
viewh:即我们看到的这个div的高度，不包括可见部分也不包括滚动条下面的不可见部分。
scrolltop:即滚动条距离顶部的距离，若scrolltop的值为0，则代表滚动条在最上面。拉动滚动条，从最上面到最下面，变化的是scrolltop的值。例：假如contenth的高度为2000，而这个div的高度只有300，那么还有1700不可见，拉动滚动条到最底部，此时scrolltop为1700，所以这个1700也可以理解为滚动条可以滚动的长度。当滑动条拉到底部的时候,contenth=viewh+scrolltop。
故可实现如下：
我要评论
$.ajax({
type: "get",
url: "record.json",//测试用假数据
datatype: "json",
success: function (records) {
var showlength = records.data.length;//需要显示的总长度
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++;//避免重复执行
}
}
});
}
function load_records(start, end) {
for (var i = start; i < end; i++) {
var stime = records.data[i].time;
var accure_time = stime.slice(5, stime.length);
var record_html = '<div class="records_item"><img src=' + records.data[i].avatar + ' class="avatar"/><div class="buyer_info"><p class="buyer_name">' + records.data[i].account + '</p><p class="status_title">购买成功</p></div>\n\<' +
'div class="buyer_address"><p class="buy_address">' + records.data[i].city + ' ip:' + records.data[i].ip + '</p>\n\<' +
'p class="buy_time">' + accure_time + '</p></div></div>';
$(record_html).appendto('.records_body');//插入一条购买记录
}
}
},
error: function () {
console.log('some errors happened!');
}
});
以上方法在苹果手机浏览器中会达不到预期效果，解决方法及代码改进
将触底判断条件更改为
if (viewh + scrolltop +1>= contenth && load <= pages)
究其原因，故在滚动时将scrolltop和viewh、contenth分别打印出来，滑到底部的时候发现他们有1个单位的误差，可能是因为某些div元素的高度不为整数而js在判断的时候直接将其取整了，故可以选择将其加1。
也可以使用另一种方式百分比的判断条件来实现：在滚动条距离底端2%以内：scrolltop / (contenth– viewh) >= 0.98。
或者使用绝对数值范围来实现，滚动条距离底端30px以内：contenth – viewh – scrolltop <= 30。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
javascript从入门到跑路-----小文的js学习笔记（19）------- js的垃圾回收机制
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
网友评论