组件

Infinite scroll 无限滚动

列表底部哨兵触发加载；data-pvs-infinite-url 拉 HTML 片段，或监听 pvs-infinite:load 自行追加。

Scroll sentinel

容器 data-pvs-infinite；滚入视口时 POST/GET 下一页或走自定义事件。

条目 1
条目 2
条目 3

加载中…

没有更多了

无 URL 时监听 pvs-infinite:load，在 detail.done(html, hasMore) 追加行。

<div class="pvs-infinite-scroll" data-pvs-infinite data-pvs-infinite-page="1" style="max-width:20rem;max-height:12rem;overflow:auto;border:1px solid var(--pvs-border-color)">
  <ul class="pvs-infinite-scroll__list" data-pvs-infinite-list>
    <li class="pvs-list__item">条目 1</li>
    <li class="pvs-list__item">条目 2</li>
    <li class="pvs-list__item">条目 3</li>
  </ul>
  <div class="pvs-infinite-scroll__loader">
    <span class="pvs-spinner pvs-spinner--sm">
    </span> 加载中…</div>
    <div class="pvs-infinite-scroll__sentinel" data-pvs-infinite-sentinel aria-hidden="true">
    </div>
    <div class="pvs-infinite-scroll__end">没有更多了</div>
  </div>
  <p class="pvs-text-sm pvs-text-muted pvs-mt-2 pvs-m-0">无 URL 时监听 <code>pvs-infinite:load</code>，在 <code>detail.done(html, hasMore)</code> 追加行。</p>

URL pagination

data-pvs-infinite-url 中 {page} 由 JS 替换；响应 HTML 片段 append 到 list。

已加载 #1
已加载 #2

下一页请求 /api/items?page=3（演示占位 URL）。

<div class="pvs-infinite-scroll" data-pvs-infinite data-pvs-infinite-url="/api/items?page={page}" data-pvs-infinite-page="2" style="max-width:20rem">
  <ul class="pvs-infinite-scroll__list" data-pvs-infinite-list>
    <li class="pvs-list__item">已加载 #1</li>
    <li class="pvs-list__item">已加载 #2</li>
  </ul>
  <div class="pvs-infinite-scroll__loader">
    <span class="pvs-spinner pvs-spinner--sm">
    </span>
  </div>
  <div class="pvs-infinite-scroll__sentinel" data-pvs-infinite-sentinel>
  </div>
</div>
<p class="pvs-text-sm pvs-text-muted pvs-m-0">下一页请求 <code>/api/items?page=3</code>（演示占位 URL）。</p>

数据属性

类名	说明
`data-pvs-infinite`	初始化 IntersectionObserver
`data-pvs-infinite-url`	下一页地址，{page} 占位
`data-pvs-infinite-list`	追加目标（默认根容器）
`data-pvs-infinite-root`	滚动根选择器（可选）
`pvs-infinite:load`	无 URL 时自定义加载
`pvs-infinite:error`	请求失败

类名速查

类名	说明
`pvs-infinite-scroll`	根容器
`pvs-infinite-scroll__list`	列表区
`pvs-infinite-scroll__loader`	加载提示
`is-loading / is-done`	状态类