基于jq 滚动条到底加载更多的方法

移动端加载更多功能实现

最新推荐文章于 2022-10-18 10:54:37 发布

原创最新推荐文章于 2022-10-18 10:54:37 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #滚动加载

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在移动端网页中实现“加载更多”功能的方法，通过监听滚动条位置并在达到底部时触发 AJAX 请求来动态加载内容。同时，文章提供了一个具体的 JavaScript 实现案例。

方法如下，可自行添加加载动画

var page=1;
var is_load=true;
function getAllBrand_more(){	//滚动条到底部加载更多
	page+=1;
	is_load=false;
	jsonAjax(API.API_LIST.SHOP_DETAIL,{'userid':userid,'page':page,},function(data){
		if(data.status==1){
			doTAppend(data,$('#ShopAll'));
			is_load=true;
		}
	});
}
$('body').on('touchmove',function(e){
	var windowHeight= document.documentElement.clientHeight;
	var	scrollTop = $('body').scrollTop();  //滚动距离
　　var	scrollHeight = $(document).height(); //文档总高度
			// console.log(scrollTop,windowHeight,scrollHeight);
			if(scrollTop + windowHeight >= scrollHeight-50){
				if(is_load){
					getAllBrand_more();
				}else{
					return;
				}
				
			}
});