我需要有人帮我写这个剧本。这是一个无限滚动(Laravel中的分页)。脚本工作完美,唯一我不知道的是如何在寻找下一页时添加加载。应该是这样的:
beforeSend: function(){
$('.ajax-load').show();
}
但是我不知道怎么做,因为我对JS很陌生。
以下是我的全部代码:
$(document).ready(function(){
$(window).scroll(fetchCondolences);
var searching = false;
function fetchCondolences(){
if (!searching) {
searching = true;
var page = $('.endless-pagination').data('next-page');
if(page !== null){
clearTimeout( $.data( this, "scrollCheck"));
$.data( this, "scrollCheck", setTimeout(function(){
var scroll_position_for_condolences_load = $(window).height() + $(window).scrollTop() + 100;
searching = false;
if(scroll_position_for_condolences_load >= $(document).height()) {
$.get(page, function(data){
$('.condolences').append(data.condolences);
$('.endless-pagination').data('next-page', data.next_page);
});
}
}, 350)
.done(function(data){
$('.ajax-load').hide();
}))
} else{
$('.ajax-load').show();
$('.ajax-load').html("<center>"+ trans_No_more_records_found +"</center>");
}
}
}
});
<section class="condolences endless-pagination pt-4" data-next-page="{{$condolences->nextPageUrl()}}">
@include('dead.extras.scroll_condolences')
</section>
<div class="py-4">
<div class="ajax-load rounded-md hidden w-full py-4 bg-gray-100">
<center>
<p>{{__('Load more')}}... <img class="inline" width="50px" height="50px" src="https://i.gyazo.com/b1821cac720bfa56367e6a23972659ed.gif"></p>
</center>
</div>
</div>
<script>var trans_No_more_records_found = "{{__('No more records found')}}";</script>
我很感激任何帮助。谢谢你
我需要有人帮我加个货。
1条答案
按热度按时间vq8itlhq1#
您可以在代码到达if语句时添加加载,以检查滚动位置,并在追加数据时清除加载。