因为已经安装了“加载更多”插件,所以事情就变得简单了,当鼠标滚轮滚到页面最下方时,就可以按“加载更多”按钮的请求事件重复做一次就行了。
将下面的代码加到首页和板块页面就行了。
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');} }); } } }); } } }
暂无回复,快来抢沙发吧
版块
人生倒计时
~扫~码~领~红~包~