egjs-axes 是一款为前端开发者提供的轴滚动和拖动效果的 JavaScript 库。本文将介绍 egjs-axes 的使用方法及其相关知识点，帮助读者更好地理解和应用该库实现自己的项目需求。
安装和引入
使用 npm 或 yarn 安装 egjs-axes：
npm install egjs-axes # 或者 yarn add egjs-axes
在需要使用 egjs-axes 的文件中，使用 import 引入：
import Axes from "egjs-axes";
初始化
初始化一个 Axes 实例时，需要传入两个参数：axesOption 和 eventDeceleration。
- axesOption：一个包含轴信息的对象，定义了轴的名称、滑动方向以及对应的 DOM 元素。
- eventDeceleration：滑动结束后速度的减速率。
例如：
const axes = new Axes({
axis: "x",
wrapper: document.querySelector(".wrapper"),
direction: Axes.DIRECTION_HORIZONTAL,
}, {
deceleration: 0.0015,
});上面的代码中，我们创建了一个只有水平方向滚动的 Axes 实例，对应的 DOM 元素是类名为 .wrapper 的元素。deceleration 参数是可选的，默认值是 0.0006。这个值决定了滑动结束后速度的减速率，数值越大，则滑动的距离越短，减速越快。
事件监听
Axes 实例可以监听多种事件，包括：
- hold：按住并且不动时触发。
- release：手指离开屏幕时触发。
- change：值改变时触发。例如在滚动过程中改变了当前值或者添加了一个新轴。
- animationStart：动画开始时触发。
- animationEnd：动画结束时触发。
例如，在 Axes 实例上监听 change 事件：
axes.on("change", e => {
console.log(e);
});change 事件的回调函数接收一个事件对象，包含以下信息：
- pos：当前位置，单位是像素。
- delta: 相对于上一次事件的位置变化量。
- holding：是否处于 hold 状态。
- bounce：是否处于边界反弹状态。
方法调用
Axes 实例有多个方法，可以实现不同的效果。下面介绍其中比较常用的几个方法：
to(pos, duration)
使用 to() 方法可以将轴移动到指定位置，并带有动画效果。
- pos：目标位置，单位是像素。
- duration：动画持续时间，单位是毫秒。
例如：
axes.to(500, 1000); // 将轴移动到 500 像素位置，耗时 1 秒
setBy(delta, duration)
使用 setBy() 方法可以将轴移动指定的距离，并带有动画效果。
- delta：移动的距离，单位是像素。
- duration：动画持续时间，单位是毫秒。
例如：
axes.setBy(100, 500); // 将轴移动 100 像素距离，耗时 0.5 秒
stop()
使用 stop() 方法可以停止当前的动画效果。
例如：
axes.stop(); // 停止当前的动画效果
示例代码
下面是一个简单的示例代码，演示了如何使用 egjs-axes 实现一个横向轮播图滚动效果。
-- -------------------- ---- -------
---- ----------------
--- ---------------
----------
----------
----------
----------
----------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------