随着前端技术的不断发展壮大，现在的网页越来越注重用户体验。滚动列表也成为了一个非常重要的组件。而 vue-iscroll-list 这个 npm 包则为我们提供了一种快速实现滚动列表的解决方案。
安装
可以通过 npm 进行安装：
--- ------- ----------------
然后在 Vue 项目中使用：
------ ----------- ---- ------------------ --------------------
使用
在 HTML 文件中使用以下语句引入 vue-iscroll-list 组件：
------------ ------------ ------------------ ---------------------------------------
其中，data 存放的是滚动列表中显示的数据集合，options 是用来配置滚动列表的选项，而 @scrollBottom 则是用来监听是否滚动到底部的事件。
比如，我们可以这样配置 options：
-------- - ----------- ----- ----------- ----- ---------------------- ----- ----------------- -------- --------------- ----- -------- ---- -
这样配置之后，就可以启用滚动条，允许鼠标滚轮滑动，启用交互式滚动条，缩放滚动条等等。
最后，我们还需要在 data 中初始化数据：
----- -
----- -
- ------ --------- -------- ----------------- --
- ------ ----------- -------- ------------------------ --
- ------ ------------- -------- ----------------------- -
-
-示例
以下是一个基于 vue-iscroll-list 的示例代码：
----------
-----
------------ ------------ ------------------ -------------------------
--------- ------------------
---- --------------- ---------- -- - -- ------------ --------
-----------
--------------
---- --------------- -----------------------------
------
-----------
--------
------ ----------- ---- ------------------
------ ------- -
----------- - ----------- --
---- -- -
------ -
----- -
- ------ --------- -------- ----------------- --
- ------ ----------- -------- ------------------------ --
- ------ ------------- -------- ----------------------- -
--
-------- -
----------- -----
----------- -----
---------------------- -----
----------------- --------
--------------- -----
-------- ----
--
-------- -----
-
--
-------- -
-------- -- -
-- ------
------------ - ----
------------- -- -
---------------
- ------ ------ -------- -------- ---------------- --
- ------ ---------- -------- --------------- -
-
------------ - -----
-- -----
-
-
-
---------
-------
----- -
------------ -----
---------- -----
----------- -------
-------------- --- ----- -----
-
-------- -
----------- -------
------------ -----
---------- -----
------ -----
-
--------在这个示例中，我们使用了依赖注入的方式通过 #default 传递子组件的参数。
结论
通过使用 vue-iscroll-list，我们能够非常方便地实现滚动列表。这个 npm 包同样也提供了许多可选的选项，帮助我们实现更加复杂的滚动列表。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055c2181e8991b448d9bde