Для реализации бесконечной прокрутки через провайдер данных можно воспользоваться расширением yii2-scroll-pager от kop, основанный на плагине JQuery Infinite Ajax Scroll.
Расширение работает с ListView и GridView.
<?= ListView::widget([
'dataProvider' => $dataProvider,
'itemOptions' => ['class' => 'item'],
'itemView' => '_item_view',
'pager' => ['class' => \kop\y2sp\ScrollPager::className()]
]);
?>
Свойство itemView
указывает на повторяемый блок(например, пост в блоге), в itemOptions
свойство class
устанавливает класс для повторяемого блока. В случае если это свойство состоит из нескольких классов (например: col-xs-4 col-sm-4 col-md-3 views-row
), можно прибегнуть к следующему коду:
<?= ListView::widget([
'dataProvider' => $dataProvider,
'itemOptions' => ['class' => ['col-xs-4 col-sm-4 col-md-3 views-row']],
'itemView' => '_items',
'pager' => [
'class' => ScrollPager::className(),
'item' => '.col-xs-4.col-sm-4.col-md-3.views-row'
]
]);
?>
Удобство в использовании расширения также добавляют события:
eventOnScroll
- срабатывает, когда посетители прокручивают;eventOnLoad
- срабатывает, когда новый URL будет загружен с сервера;eventOnLoaded
- срабатывает после загрузки новой страницы с сервера;eventOnRender
- срабатывает до того, как новые объекты будут отрендерены;eventOnRendered
- срабатывает после рендеринга новых предметов;eventOnNoneLeft
- срабатывает, когда больше не осталось страниц для загрузки;eventOnNext
- срабатывает, когда следующая страница должна быть загружена. Происходит до начала загрузки следующей страницы. С этим событием можно отменить загрузку следующей страницы;eventOnReady
- срабатывает, когда IAS и все расширения были инициализированы;eventOnPageChange
- срабатывает, когда используется прокрутка на другую страницу.
Стандартный спиннер при прокрутке задается через свойство spinnerSrc
, однако спиннер можно задать и при помощи html и css, для этого:
- Установим свойства для ScrollPager:
'delay' => 2000, 'spinnerTemplate' => '<div class="ias-spinner" style="display: hidden;"></div>',
- Установим событие eventOnLoad для ScrollPager:
'eventOnLoad' => "function() { $('.list-view').append('<div class=\"spinner\">Ваш спиннер</div>'); }",
- Установим событие eventOnRender для ScrollPager:
'eventOnRender' => "function() { $('.spinner').remove(); }",
Подгрузку новых страниц можно осуществлять автоматически, либо при нажатии кнопки, данное событие регулируется свойством triggerOffset.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}