概述
scrollable-view 是一个基于原生 JavaScript 实现的可滚动视图组件，可以实现横向或纵向的滚动效果，并支持无限滚动、分页等功能。本篇文章将详细介绍该 npm 包的使用方法，并提供示例代码。
安装
使用 npm 安装 scrollable-view：
npm install scrollable-view --save
使用方法
创建容器
首先，我们需要在 HTML 中创建一个容器，如下：
<div id="scroll-container"></div>
初始化
使用 JavaScript 在容器中初始化 scrollable-view：
import ScrollView from 'scrollable-view'
const container = document.querySelector('#scroll-container')
const scrollView = new ScrollView(container)这里我们使用 ES6 的模块导入方式导入 scrollable-view，创建一个变量 scrollView，将其和容器绑定。
设置数据
接下来，我们可以通过 setItems 方法为 scrollView 设置数据：
-- -------------------- ---- ------- ----- ----- - - - --- -- ----- ------- -- - --- -- ----- -------- -- - --- -- ----- -------- -- - --- -- ----- -------- -- - --- -- ----- ---------- -- - --- -- ----- ----- - - --------------------------
在上面的示例中，我们为 scrollView 设置了一个名为 items 的数组，其中每个元素都包含一个 id 和一个 name 属性。
设置选项
除了数据外，我们还可以使用 setOptions 方法为 scrollView 设置选项：
scrollView.setOptions({
axis: 'y',
perPage: 3
})axis 选项可以设置 scrollView 的滚动方向，默认值为 x，也可以设置为 y 或 xy。perPage 选项表示每页显示的数量，默认值为 1。
监听事件
scrollable-view 支持多种事件监听器，下面是监听轮播到下一项的示例：
scrollView.on('next', function (currentItem, currentIndex) {
console.log(`Next item is ${currentItem.name}, index is ${currentIndex}.`)
})在上面的示例中，我们使用 on 方法为 scrollView 添加了一个 next 事件监听器，该监听器在从当前项滚动到下一项时触发，可以传入两个参数：currentItem 表示当前项的数据，currentIndex 表示当前项在数据中的索引。
控制滚动
我们可以使用如下方法控制 scrollable-view 的滚动：
scrollView.scrollTo(3) // 滚动到第 3 项 scrollView.scrollToNext() // 滚动到下一项 scrollView.scrollToPrev() // 滚动到上一项
上面的方法分别设置 scrollView 滚动到第三项、下一项或上一项。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
---- ----------------------------
------- --------------
------ ---------- ---- -----------------
----- --------- - -------------------------------------------
----- ---------- - --- ---------------------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ---------- --
- --- -- ----- ----- -
-
--------------------------
-----------------------
----- ----
-------- -
--
--------------------- -------- ------------- ------------- -
----------------- ---- -- -------------------- ----- -- ------------------
--
----------------------
---------结语
scrollable-view 提供了一个简单易用的滚动视图组件，具有多种配置选项和事件监听器。通过本文的介绍，相信读者已经对该组件有了一定的了解，并且可以开始使用它了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c9181e8991b448d9fb8