0

无限下拉展示帖子列表(类似瀑布流)教程

V xinyu
2025-07-21 28

因为已经安装了“加载更多”插件,所以事情就变得简单了,当鼠标滚轮滚到页面最下方时,就可以按“加载更多”按钮的请求事件重复做一次就行了。

将下面的代码加到首页和板块页面就行了。

window.onscroll = debounce(scrollFn, 200);
//防抖
function debounce(fn, delay){
	let timeout;
	return function() {
		clearTimeout(timeout);
		timeout = setTimeout(()=>{
			fn.apply(this, arguments);
		},delay)
	}
}
function scrollFn(){
	//获取网页的总高度
	var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
	//clientHeight是网页在浏览器中的可视高度
	var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;
	//scrollTop是浏览器滚动条的top位置
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	//判断到底部了
	if (scrollTop + clientHeight > htmlHeight - 50) {
		$this = $('.loadmore');
		$this.css('box-shadow','unset').text('正在加载,请稍后。。。');
		var href = $this.attr('data-url');
		if (href != undefined) {
			$.ajax({
				url: href,
				type: 'get',
				error: function(request) {
					console.log(request);
					$this.css('box-shadow','#F56C6C 0px 0px 4px').text('加载失败');
				},
				success: function(data) {
					$this.css('box-shadow','unset').text('加载更多');
					var curpage=$('.pagination').find('.active').find('.page-link').text();
					curpage++;
					$('.pagination').find('.active').removeClass('active');
					$('.pagination li').each(function(){
						if($(this).text() ==curpage) {$(this).addClass('active');}
					});
					var $res = $(data).find('.threadItem');
					$('.threadlist').append($res.fadeIn(500));
					var newhref = $(data).find('.nextpage').attr('data-url');
					if (newhref != undefined) {
						$('.loadmore').attr('data-url', newhref);
					} else {
						$('.loadmore').remove();
						curpage--;
						$('.pagination li').each(function(){
						if($(this).text() ==curpage) {$(this).addClass('active');}
						});
					}
				}
			});
		}
	}
}
本站申明 1、本论坛一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请投诉举报
2、本论坛的资源部分来源于网络,如有侵权,请 私信联系站长进行删除处理。
3、不得发布和链接任何有关政治, 色情, 宗教, 迷信.低俗、变态、血腥、暴力以及危害国家安全.诋毁政府形象等违法言论和信息的帖子.
4、本帖图片及内容纯属发布用户个人意见,与本站无关!
4,本帖如为原创资源/教程分享帖,则本站与发布用户共同享有内容版权!
6,本站管理有权在不经发布者同意的情况下,根据版规及相关法律法规删除/修改本帖!
7,如无特别说明,任何个人或者组织不得转载本帖内容!任何个人或团体不得将本站资源用于非法用途!
8,未尽事宜最终解释权归本站(xiuno论坛)所有!

最新回复 (0)

    暂无评论

    • Xiuno论坛
      2

请先登录后发表评论!

返回