Easy UI

InfiniteScroll 无限滚动 ​

滚动至底部时，加载更多数据。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-infinite-scroll/index.js";
</script>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

通过 ea-infinite 与 ea-infinite-item 组件配合实现无限滚动。通过监听 bottomReached 事件可实现滚动到底部时自动执行加载方法。

1
2
3
4
5
loading...
no more
css
.sg-infinite-item {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: aquamarine;
  margin-bottom: 10px;
}

ea-infinite::part(wrap) {
  display: flex;
  flex-direction: column;
}
html
<div class="demo" style="height: 150px; overflow: auto">
  <ea-scrollbar>
    <ea-infinite-scroll id="basicInfinite">
      <div class="sg-infinite-item">1</div>
      <div class="sg-infinite-item">2</div>
      <div class="sg-infinite-item">3</div>
      <div class="sg-infinite-item">4</div>
      <div class="sg-infinite-item">5</div>

      <section slot="loading">
        <ea-icon name="mug-hot"></ea-icon> loading...
      </section>
      <section slot="noMore"><ea-icon name="ban"></ea-icon> no more</section>
    </ea-infinite-scroll>
  </ea-scrollbar>
</div>

```js const basicExample = { el: document.querySelector("#basicInfinite"),
createTemplate(content) { const item = document.createElement("div");
item.className = "sg-infinite-item"; item.innerHTML = content; return item; },
init() { this.el.addEventListener("loadmore", async e => { const { finished } =
e.detail; const length = this.el.querySelectorAll(".sg-infinite-item").length;
for (let i = length; i < length + 5; i++) {
this.el.appendChild(this.createTemplate(i + 1)); } finished(); }); }, };
basicExample.init();

禁用加载 ​

通过设置 disabled 属性，可以禁用无限加载功能。若同时使用了插槽名为 noMore 的插槽，则会显示 noMore 插槽的内容。

1
2
3
4
5
loading...
no more
css
.sg-infinite-item {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: aquamarine;
  margin-bottom: 10px;
}

ea-infinite::part(wrap) {
  display: flex;
  flex-direction: column;
}
html
<div class="demo" style="height: 150px; overflow: auto">
  <ea-scrollbar>
    <ea-infinite-scroll id="statusInfinite">
      <div class="sg-infinite-item">1</div>
      <div class="sg-infinite-item">2</div>
      <div class="sg-infinite-item">3</div>
      <div class="sg-infinite-item">4</div>
      <div class="sg-infinite-item">5</div>
      <section slot="loading" style="text-align: center">
        <ea-icon name="mug-hot"></ea-icon> loading...
      </section>
      <section slot="noMore" style="text-align: center">
        <ea-icon name="ban"></ea-icon> no more
      </section>
    </ea-infinite-scroll>
  </ea-scrollbar>
</div>

```js const statusExample = { el: document.querySelector("#statusInfinite"),
createTemplate(content) { const item = document.createElement("div");
item.className = "sg-infinite-item"; item.innerHTML = content; return item; },
init() { this.el.addEventListener("loadmore", async e => { const { finished,
noMore } = e.detail; const length =
this.el.querySelectorAll(".sg-infinite-item").length; await new Promise(resolve
=> setTimeout(resolve, 2000)); if (length >= 20) return noMore(); for (let i =
length; i < length + 5; i++) { this.el.appendChild(this.createTemplate(i + 1));
} finished(); }); }, }; statusExample.init();

Attributes ​

参数说明类型可选值默认值
status当前状态，控制显示的状态类（finished、loading、noMore）Stringfinished loading noMorefinished
distance占位元素与视口交叉的 rootMargin（像素），用于触发加载Number-0

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container根容器（组件外层 section，part='container'）
placeholder占位元素（用于 IntersectionObserver 观察，part='placeholder'）
loading加载状态显示容器（slot="loading" 的外层，part='loading'）
noMore无更多数据显示容器（slot="noMore" 的外层，part='noMore'）

Events ​

事件名说明回调参数
loadmore占位元素进入可视区并且组件处于可加载（status 为 finished）时触发Object，包含回调函数：{ finished: () => void, noMore: () => void }，事件可冒泡

Slots ​

名称说明
-默认插槽：滚动列表的内容（列表项通常直接作为子元素放入）
loading加载中显示内容（放置加载中提示或自定义 loading UI）
noMore无更多数据时显示内容（当组件通过回调或 disabled 状态切换到 noMore 时显示）