README

无限Ajax滚动小部件。

基于jQuery插件：https://infiniteajaxscroll.com

安装

composer require --prefer-dist ereminmdev/yii2-infinite-scroll

文档

有关clientOptions的信息，请参阅：https://infiniteajaxscroll.com/docs/options.html

使用方法

作为分页组件添加

echo ListView::widget([
     'dataProvider' => $dataProvider,
     'itemOptions' => ['class' => 'item'],
     'pager' => ['class' => \ereminmdev\yii2\infinite_scroll\InfiniteScroll::class]
]);

或将作为小部件插入到视图中

<div class="pagination">
    <?= InfiniteScroll::widget([
        'pagination' => $dataProvider->getPagination(),
        'clientOptions' => [
            'container' => '.items',
            'item' => '.item',
            'pagination' => '.pagination',
        ],
        'clientExtensions' => [
            InfiniteScroll::EXT_TRIGGER => [
                'offset' => 0,
                'text' => Yii::t('app', 'Load more...'),
                'html' => '<div class="ias-trigger ias-trigger-next"><a class="btn btn-default">{text}</a></div>',
                'textPrev' => Yii::t('app', 'Load previous...'),
                'htmlPrev' => '<div class="ias-trigger ias-trigger-prev"><a class="btn btn-default">{text}</a></div>',
            ],
            InfiniteScroll::EXT_SPINNER => [
                'html' => '<div class="ias-spinner"><i class="fa fa-refresh fa-spin fa-lg"></i></div>',
            ],
            InfiniteScroll::EXT_NONE_LEFT => [
                'html' => 'You reached the end.',
            ],
        ],
        'clientEvents' => [
            'rendered' => new \yii\web\JsExpression('function() { console.log("on rendered"); }'),
        ],
    ]) ?>
</div>

在通过Ajax更新内容时，不要忘记重新初始化插件

$(document).on('click', '#sample_filter', function (event) {
    $('.list-view').load('sample_url', function () {
        //reinitialize plugin after load success
        jQuery.ias().reinitialize();
    });
    event.preventDefault();
});