实现了无限下拉展示帖子列表(类似瀑布流),提供修改源码
CF
管理员组 管理员组
2022-03-30 12:48
楼主

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

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

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');}
						});
					}
				}
			});
		}
	}
}
最后于 2023-11-21 19:45 被CF编辑 ,原因:
找不到工作/(ㄒoㄒ)/~~

 收藏 分享
最新回复 (0)
    暂无回复,快来抢沙发吧

    暂无回复,快来抢沙发吧

  • 游客
    沙发
    登录 后参与评论
返回
CF
管理员组
主题数
帖子数
精华数