无限滚动加载组件示例

这是一个基于Web Component技术开发的无限滚动加载组件，支持自定义加载状态和无数据状态，适用于各种滚动加载场景。

下面展示了两种使用场景：在带有overflow-y: auto的容器中使用和在普通容器（滚动发生在body）中使用。

<infinite-scroll-list id="scrollView" on-end-reached-threshold="100" has-next-page="true" > <div id="list-container">  </div>  <div slot="loading">正在加载更多数据...</div>  <div slot="no-data">已经到底啦，没有更多数据了！</div> </infinite-scroll-list> <script> const scrollView = document.getElementById('scrollView'); scrollView.addEventListener('end-reached', async () => { // 加载更多数据的逻辑 // 注意：只有当has-next-page为true时才会触发此事件 const moreData = await fetchMoreData(); // 更新列表内容 updateListContent(moreData); // 如果没有更多数据，更新has-next-page属性 if (!hasMoreData) { scrollView.setAttribute('has-next-page', 'false'); } }); </script>

属性名	类型	默认值	说明
on-end-reached-threshold	Number	0	距离底部多少像素时触发加载事件
has-next-page	Boolean	false	是否还有下一页数据

插槽名	说明
default	默认插槽，用于放置列表内容
loading	加载中状态的显示内容
no-data	没有更多数据时的显示内容

无限滚动加载组件示例

组件属性和事件

使用示例

演示

示例1：在overflow-y: auto的容器中使用

示例2：在普通容器中使用（滚动发生在body）