javascript - Yii2中的无限数据滚动

Question

我想在 Yii2 中对列表进行无限滚动

到目前为止我已经做到了这一点，下面是我的 jQuery 代码

$(document).ready(function(){
var postParams ={user_id:'1',start:0,end:15};
$('#notificationlist').ready( function () {
    $.ajax({
        'url':'../../../frontend/web/app/notificationlist',
        'type':'post',
        'data': postParams,
        success: function(data)
        {
            var notificationlist = data.notificationlist;
            var notificationcount = data.notification;
            if(notificationcount !== 0){
                $.each(notificationlist, function (index, value) {
                    mood = notificationlist[index].mood_message;
                    output = '<li id='+index+' value='+notificationcount+'>'+index +'</li>'+
                    'first label'+
                    'second label'+
                    'third label'+
                        'forth label'+
                        'fifth label'+
                        'six label';
                    $("#notificationlist").append(output).promise().done();
                });
            }
        }
    });

 });
});

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
    var start = parseInt($('#notificationlist').children().last().attr('id'));
    getresult(start);
    }
});

function getresult(start) {
var postParams ={user_id:'1',start:start,end:7};
$.ajax({
    'url':'../../../frontend/web/app/notificationlist',
    'type':'post',
    'data': postParams,
    beforeSend: function(){
        $('#loader-icon').show();
    },
    complete: function(){
        $('#loader-icon').hide();
    },
    success: function(data){
         var notificationlist = data.notificationlist;
        var notificationcount = data.notification;
        if(notificationcount !== 0){
            $.each(notificationlist, function (index, value) {
                mood = notificationlist[index].mood_message;
                output = '<li id='+index+' value='+notificationcount+'>'+index +'</li>'+
                    'first label'+
                    'second label'+
                    'third label'+
                    'forth label'+
                    'fifth label'+
                    'six label';
                $("#notificationlist").append(output).promise().done();
            });
        }
    },
    error: function(){}
   });
}

现在的问题是我不知道如何控制操作和 jQuery 中的 start 和 end。

如何获取滚动的起始数据和结束数据，对于初始页面我可以传递起始点和结束点，但如何检查它是否是页面上的最后一条记录并将起始点和结束点发送到行动？

Answer 1

只需记住已加载的项目并将其用作"new"开始即可。

var alreadyLoadedItems = 0;
$('#notificationlist').ready( function () {
    $.ajax({
        'url':'../../../frontend/web/app/notificationlist',
        'type':'post',
        'data': {user_id:'1',start:alreadyLoadedItems},
        success: function(data)
        {
            var notificationlist = data.notificationlist;
            alreadyLoadedItems += data.notificationCount; // maybe 15 oder something else
            ...