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

只需记住已加载的项目，并将其用作＆＃34; new＆＃34;启动。

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
            ...

Answer 2

您可以将以下代码用于自定义无限滚动

查看代码

   <?php $pjax = \yii\widgets\Pjax::begin();

         echo \yii\widgets\ListView::widget([
        'dataProvider' => $dataProvider,
        'options' => ['class' => 'list-view'],
        'itemView' => function ($model) {
            return $this->render('your-view', ['model' => $model]);
        },
        'summary' => false,
        'itemOptions' => [
            'tag' => false //if you want to avoid extra div's
        ],
        'layout' => '{items}<div class="pagination-wrap" style="display:none">{pager}</div>',
        'pager' => [
        ],
    ]);
    \yii\widgets\Pjax::end();
    ?>

这是javascript的代码

      $(window).load(function () {
            var win = $(window);
            win.scroll(function () {
            if ($(document).height() - win.height() == win.scrollTop()) {
            if ($('.pagination .next a:first').attr('href')) {
                $.ajax({
                    url: $('.pagination .next a:first').attr('href'),
                    beforeSend: function (xhr) {
                    },
                    success: function (text) {
                        var html = $(text);
                        $('#p0').append(html.find('.list-view').html());
                        $('body').find('.pagination').html(html.find('.pagination').html());

                    }
                });
            }
        }
    });
});

Yii2中的无限数据滚动

2 个答案: