介绍
miyu-scroller 是一个基于原生 JavaScript 的无限滚动组件，它可以帮助我们实现图片懒加载、瀑布流布局等常见应用场景。miyu-scroller 可以通过 npm 安装使用，本文将介绍如何使用 miyu-scroller 进行开发。
安装
首先，我们需要在项目中安装 miyu-scroller：
npm install miyu-scroller --save
使用
miyu-scroller 提供了两种使用方式，一种是通过实例化 Scroller 类来使用，另一种是使用 Scroller 独立函数。
实例化 Scroller 类
我们可以通过以下代码来实例化 Scroller 类：
-- -------------------- ---- -------
------ -------- ---- ----------------
----- -------- - --- ----------
--- ------------------------------------
---------- ----
------- ---
------- ---------- -
-- -- ---------
--
---
-----------------参数配置：
el：必选参数，指定 Scroller 的容器元素threshold：可选参数，指定触发加载的阈值，默认为 200，即距离底部 200px 时触发加载buffer：可选参数，指定预加载的区域大小，默认为 10，即在距离触发加载区域 10px 处开始预加载loader：必选参数，指定加载数据的方法
使用 Scroller 独立函数
我们也可以直接通过 Scroller 独立函数来使用：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-----------
------------------------------------
---------- -
-- -- ---------
--
-
---------- ----
------- ---
--
--参数配置：
el：必选参数，指定 Scroller 的容器元素loader：必选参数，指定加载数据的方法threshold：可选参数，指定触发加载的阈值，默认为 200，即距离底部 200px 时触发加载buffer：可选参数，指定预加载的区域大小，默认为 10，即在距离触发加载区域 10px 处开始预加载
示例
下面是一个简单的示例，实现在滚动时异步加载图片：
<div id="scroller" style="height: 500px; overflow: auto;">
<ul id="list" style="padding: 0; margin: 0;">
<li><img src="loading.gif"></li>
</ul>
</div>-- -------------------- ---- -------
------ -------- ---- ----------------
--- ---- - --------------------------------
--- ---- - --
--- -------- - --- ----------
--- ------------------------------------
---------- ----
------- ---
------- ---------- -
-- --------
--------------------- -
-------
--- ----- - ---
--- ---- - - -- - - --- ---- -
----- -- --------- ------------------------------------------------ - -- - -----------
-
-------------- -- ------
-- ------
--
---
-----------------总结
miyu-scroller 是一个非常方便实用的原生 JavaScript 组件，可以帮助我们快速实现滚动加载等常见应用场景。在使用 miyu-scroller 时，我们应该合理设置阈值和预加载区域大小，以达到最佳的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0bca