• 周日. 7月 3rd, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

懒加载数据

admin

11月 28, 2021

// 滚动加载数据
var g_datas_index = 1 // 业务代码 可忽略
$(window).scroll(function(){
var scrollTop = $(this).scrollTop()
var scrollHeight = $(document).height()
var windowHeight = $(this).height()
if(scrollTop + windowHeight == scrollHeight){ // 相等代表已滚动到底
// 下面执行到底后想要执行的操作
g_datas_index = g_datas_index + 1
processContent(unionid, up_list, g_datas_index)
}
})




// 滚动加载数据 滚动条的一半就加载数据,向上滑动不加载数据
var g_datas_index = 1;
var g_lazy_status = 0;
var g_top = 0;
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();

if(scrollTop + windowHeight >= scrollHeight / 2 && g_lazy_status == 0 && scrollTop > g_top){
// 记录本次高度
g_top = scrollTop;
// 修改状态,为 1 时不加载数据
g_lazy_status = 1;
g_datas_index = g_datas_index + 1;
console.log(g_datas_index);
lazy_loading(g_datas_index);
}
});
// lazy_loading 函数里需要更改懒加载状态 g_lazy_status = 0,再次滑动符合条件即可再次加载数据

发表评论

您的电子邮箱地址不会被公开。