README

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

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

资源

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

安装

Composer

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

{
    "require": {
        "dlds/yii2-infinite-scroll": "1.0.*@dev"
    }
}

##小部件配置

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

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

##示例用法

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

因此，最小必需的配置如下所示

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',
    ],
]);

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

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,
        ],
    ],
]);

##许可

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