darkcs/yii2-infinite-scroll

将分页器与无限滚动功能连接。

维护者

详细信息

github.com/DarkCs/yii2-infinite-scroll

源代码

问题

安装数量: 5,684

依赖关系: 0

建议者: 0

安全性: 0

星标: 12

关注者: 2

分支: 12

开放性问题: 2

语言：JavaScript

类型：yii2-extension

dev-master 2015-09-08 21:38 UTC

Requires

MIT 42e761c0e2fe474e900ef52998133e3f402f8524

  • Yuri Plaksunov <darkcs2.woop@gmail.com>

pagerextensionyii2scrollinfiniteendlessautopagerize

This package is not auto-updated.

Last update: 2024-09-28 18:04:35 UTC

README

支持无限滚动的 LinkPager

安装

php composer.phar require --prefer-dist "darkcs/yii2-infinite-scroll" "*"

选项

$autoStart true;
$containerSelector .list-view;
$itemSelector .item;
$paginationSelector .pagination;
$nextSelector .pagination .next a:first;
$bufferPx 40;
$pjaxContainer null;

使用示例

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

echo \yii\widgets\ListView::widget([
    'dataProvider' => $dataProvider,
    'options' => [
        'class' => '.list-view',
    ],
    'itemView' => '_item',
    'summary' => false,
    'layout' => '{items}<div class="pagination-wrap">{pager}</div>',
    'pager' => [
        'class' => \darkcs\infinitescroll\InfiniteScrollPager::className(),
        'paginationSelector' => '.pagination-wrap',
        'pjaxContainer' => $pjax->id,
    ],
]);
\yii\widgets\Pjax::end();

JavaScript 使用

// init
$('.list-view').infinitescroll();
// enable, paused by default
$('.list-view').infinitescroll('start');
// disable
$('.list-view').infinitescroll('stop');

事件

$('.list-view').on('infinitescroll:afterRetrieve', function(){
    console.log('infinitescroll:afterRetrieve');
});

$('.list-view').on('infinitescroll:afterStart', function(){
    console.log('infinitescroll:afterStart');
});

$('.list-view').on('infinitescroll:afterStop', function(){
    console.log('infinitescroll:afterStop');
});