README

Yii2 扩展用于无限滚动 jQuery 插件，提供如 ListView 等组件的滚动功能。它渲染一个超链接，链接到目标页面的下一页，并注册无限滚动 jQuery 插件，该插件使用 JavaScript 获取并附加后续页面的内容，当 JavaScript 被禁用时，将优雅地降级为完整页面重新加载。

提供了一些允许自定义滚动行为的功能，包括 Twitter 风格的手动触发、在 overflow div 中的本地滚动、Masonry 集成等。

资源

Yii2 扩展页面
Infinite-Scroll jQuery 插件文档

安装

Composer

将扩展添加到您的 composer.json 并像通常一样更新依赖项，例如通过运行 composer update

{
    "require": {
        "shiyang/yii2-infinite-scroll": "*"
    }
}

##小部件配置

除了 LinkPager 提供的大部分属性外，此小部件还允许您配置

$widgetId 字符串 小部件所有者 ID，必需
$itemsCssClass 字符串 封装项目的标签的 CSS 类，必需
$pluginOptions 数组无限滚动 jQuery 插件选项。有关更多信息，请参阅无限滚动文档
$contentLoadedCallback 字符串|JsExpression 在通过 AJAX 调用加载内容时要执行的 JavaScript 回调

##示例用法

插件通过将获取的项目附加到父容器末尾来工作，因此需要配置父 ListView 小部件的 layout 属性，将 {items} 包装到具有某些类（用作选择器）的 div 容器中。可以根据项目要求配置所有小部件初始化插件时使用的选择器，但通常只需设置 itemCssClass（我们创建的包装标签的类）和 widgetId（这可以确保同一页面上不会发生多个插件的冲突）。

所以最小必需的配置看起来像这样

use shiyang\infinitescroll\InfiniteScrollPager;

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
    ],
]);

一个示例，说明如何自定义某些小部件/插件选项

use shiyang\infinitescroll\InfiniteScrollPager;

echo ListView::widget([
    ...
    'id' => 'my-listview-id',
    'layout' => "{summary}\n<div class=\"items\">{items}</div>\n{pager}",
    'pager' => [
        'class' => InfiniteScrollPager::className(),
        'widgetId' => 'my-listview-id',
        'itemsCssClass' => 'items',
        'contentLoadedCallback' => 'afterAjaxListViewUpdate',
        'nextPageLabel' => 'Load more items',
        'linkOptions' => [
            'class' => 'btn btn-lg btn-block',
        ],
        'pluginOptions' => [
            'loading' => [
                'msgText' => "<em>Loading next set of items...</em>",
                'finishedMsg' => "<em>No more items to load</em>",
            ],
            'behavior' => InfiniteScrollPager::BEHAVIOR_TWITTER,
        ],
    ],
]);

或者

控制器操作

function actionIndex()
{
    $query = Article::find()->where(['status' => 1]);
    $countQuery = clone $query;
    $pages = new Pagination(['totalCount' => $countQuery->count()]);
    $models = $query->offset($pages->offset)
        ->limit($pages->limit)
        ->all();
    
    return $this->render('index', [
        'models' => $models,
        'pages' => $pages,
    ]);
}

视图

use shiyang\infinitescroll\InfiniteScrollPager;

<div id="content">
<?php 
foreach ($models as $model) {
    // display $model here
}
?>
</div>
 
// display pagination
echo InfiniteScrollPager::widget([
   	'pagination' => $pages,
   	'widgetId' => '#content',
]);

##许可

扩展在 MIT 许可下发布，与底层 jQuery 插件相同。

shiyang / yii2-infinite-scroll

维护者

详细信息

README

资源

安装

Composer