apexwire / yii2-infinite-scroll
将分页链接与无限滚动支持结合。
dev-master
2016-04-04 12:21 UTC
Requires
- yiisoft/yii2: *
This package is not auto-updated.
Last update: 2024-09-14 19:25:31 UTC
README
支持无限滚动的 LinkPager
安装
php composer.phar require --prefer-dist "apexwire/yii2-infinite-scroll" "*"
选项
$autoStart true
; -
$containerSelector .list-view
;
$itemSelector .item
;
$paginationSelector .pagination
;
$nextSelector .pagination .next a:first
;
$bufferPx 40
;
$pjaxContainer null
;
$alwaysHidePagination = true
;
$container = ['window']
; window
- 在主滚动条接近文档底部时加载内容,container
- 在容器滚动条接近容器底部时加载内容,
使用示例
$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' => \apexwire\infinitescroll\InfiniteScrollPager::className(), 'paginationSelector' => '.pagination-wrap', 'pjaxContainer' => $pjax->id, ], ]); \yii\widgets\Pjax::end();
JS 使用
// 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'); });