因为已经安装了“加载更多”插件,所以事情就变得简单了,当鼠标滚轮滚到页面最下方时,就可以按“加载更多”按钮的请求事件重复做一次就行了。
将下面的代码加到首页和板块页面就行了。
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');}
});
}
}
});
}
}
}
暂无评论