随着前端技术的不断发展壮大，现在的网页越来越注重用户体验。滚动列表也成为了一个非常重要的组件。而 vue-iscroll-list 这个 npm 包则为我们提供了一种快速实现滚动列表的解决方案。
安装
可以通过 npm 进行安装：
npm install vue-iscroll-list
然后在 Vue 项目中使用：
import IScrollList from 'vue-iscroll-list' Vue.use(IScrollList)
使用
在 HTML 文件中使用以下语句引入 vue-iscroll-list 组件：
<IScrollList :data="data" :options="options" @scrollBottom="loadMore"></IScrollList>
其中，data 存放的是滚动列表中显示的数据集合，options 是用来配置滚动列表的选项，而 @scrollBottom 则是用来监听是否滚动到底部的事件。
比如，我们可以这样配置 options：
options: {
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true,
scrollY: true
}这样配置之后，就可以启用滚动条，允许鼠标滚轮滑动，启用交互式滚动条，缩放滚动条等等。
最后，我们还需要在 data 中初始化数据：
data: {
data: [
{ title: 'Vue.js', content: '渐进式JavaScript框架' },
{ title: 'React.js', content: 'Facebook出品的JavaScript库' },
{ title: 'Angular.js', content: 'Google开发的JavaScript框架' }
]
}示例
以下是一个基于 vue-iscroll-list 的示例代码：
-- -------------------- ---- -------
----------
-----
------------ ------------ ------------------ -------------------------
--------- ------------------
---- --------------- ---------- -- - -- ------------ --------
-----------
--------------
---- --------------- -----------------------------
------
-----------
--------
------ ----------- ---- ------------------
------ ------- -
----------- - ----------- --
---- -- -
------ -
----- -
- ------ --------- -------- ----------------- --
- ------ ----------- -------- ------------------------ --
- ------ ------------- -------- ----------------------- -
--
-------- -
----------- -----
----------- -----
---------------------- -----
----------------- --------
--------------- -----
-------- ----
--
-------- -----
-
--
-------- -
-------- -- -
-- ------
------------ - ----
------------- -- -
---------------
- ------ ------ -------- -------- ---------------- --
- ------ ---------- -------- --------------- -
-
------------ - -----
-- -----
-
-
-
---------
-------
----- -
------------ -----
---------- -----
----------- -------
-------------- --- ----- -----
-
-------- -
----------- -------
------------ -----
---------- -----
------ -----
-
--------在这个示例中，我们使用了依赖注入的方式通过 #default 传递子组件的参数。
结论
通过使用 vue-iscroll-list，我们能够非常方便地实现滚动列表。这个 npm 包同样也提供了许多可选的选项，帮助我们实现更加复杂的滚动列表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2181e8991b448d9bde