tv2regionerne/statamic-endless

该包最新版本（v1.3.0）没有可用的许可信息。

维护者

详细信息

github.com/tv2regionerne/statamic-endless

源代码

问题

安装: 1

依赖: 0

建议: 0

安全: 0

星星: 0

观察者: 3

分支: 0

开放问题: 1

v1.3.0 2024-09-09 09:07 UTC

Requires

Unknown License c5717b121ef53e40bd8d3a8283dd3033f8b93812

This package is auto-updated.

Last update: 2024-09-09 09:07:21 UTC

README

Statamic Endless 允许您创建无限滚动列表，当您到达列表底部时自动或手动加载新条目。

如何安装

您可以在 Statamic 控制面板的 工具 > 扩展 部分搜索此插件，并点击 安装，或者从项目根目录运行以下命令

composer require tv2regionerne/statamic-endless

如何使用

请确保 Livewire v3 已安装，然后使用 collection:endless 标签

{{ collection:endless as="posts" from="blog" paginate="5" }}
    <div x-ref="append">
        {{ posts }}
            {{ partial:blog/post }}
        {{ /posts }}
    </div>
    <button x-on:click="trigger" x-show="paginate.has_more_pages">Load More</button>
{{ /collection:endless }}

带有拦截器的示例

{{ collection:endless as="posts" from="blog" paginate="5" }}
    <div x-ref="append">
        {{ posts }}
            {{ partial:blog/post }}
        {{ /posts }}
    </div>
    <div
    x-data="{
        intersecting: false,
        init() {
            $watch('intersecting', () => this.check());
        },
        check() {
            if (this.intersecting && paginate.has_more_pages) {
                trigger().then(() => this.check());
            }
        },
    }"
    x-show="!loading && paginate.has_more_pages"
    x-intersect:enter="intersecting = true"
    x-intersect:leave="intersecting = false">
</div>
{{ /collection:endless }}

您必须启用分页。

内容将包裹在 Livewire/Alpine 组件中

  • 您应该为包含列表的元素添加 x-ref 为 append 或 prepend。
  • 您可以使用 x-intersect 或 x-on 调用 trigger 以加载更多条目。
  • 您可以使用 loading 检查加载状态。

在次级加载时，从标签作用域外部传递的变量只有在将它们列在 context 参数（管道分隔）中时才可用。这些变量必须是可序列化的。