README

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

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

目前此扩展仅支持无限滚动插件的v2.x版本。

资源

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

安装

Composer

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

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

小部件配置

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

• $widgetId 字符串 小部件所有者ID，必需
• $itemsCssClass 字符串 封装项目的标签的CSS类。必需
• $pluginOptions 数组 无限滚动jQuery插件选项。有关更多信息，请参阅无限滚动文档
• $contentLoadedCallback 字符串|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插件相同。