什么是 squiss？
Squiss 是一个基于 JavaScript 的轻量级移动端滑动事件处理器，可以用于在移动端创建可滑动的容器组件，同时提供了多个事件 API，方便开发者进行控制和定制。
相比于其他移动端滑动解决方案，Squiss 具有更高的性能和更好的兼容性，可以在 iOS、Android、Windows Phone 等多个平台上稳定运行，并支持各种轻量化的UI库（如Zepto.js和JQuery）。
如何使用 Squiss？
首先，我们需要通过 npm 安装 Squiss，可以在命令行中运行以下命令进行安装：
npm install squiss --save
接下来，我们需要创建一个包含我们需要使用 Squiss 的滑动区域的 HTML 元素，例如：
-- -------------------- ---- -------
---- --------------------
----
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- -------
-----
------接着，在 JavaScript 中引用和实例化 Squiss：
const Squiss = require('squiss');
const scrollWrapper = document.querySelector('#scroll-wrapper');
const squiss = new Squiss(scrollWrapper);可以看到，我们通过 require 方法引入了 Squiss，然后使用 querySelector 获取了我们之前创建的包含滑动区域的 HTML 元素，最后实例化了 Squiss 并传入了该元素作为参数。
Squiss 实例化后，我们可以对其进行各种配置和控制，以下是一些常用的配置选项和 API：
配置选项
autoHeight
当设置为 true 时，容器高度会自适应内容高度。
squiss.options.autoHeight = true;
momentum
当设置为 true 时，当滑动结束后会继续滑动一段距离。
squiss.options.momentum = true;
bounce
当设置为 true 时，当滑动到极限位置时会发生回弹效果。
squiss.options.bounce = true;
directionLockThreshold
设置滑动方向锁定阈值。
squiss.options.directionLockThreshold = 5;
scrollX
当设置为 true 时，容器会横向滑动。
squiss.options.scrollX = true;
scrollY
当设置为 true 时，容器会纵向滑动。
squiss.options.scrollY = true;
API
scrollTo(positionX, positionY, time, easing)
滑动到指定位置。
squiss.scrollTo(0, 500, 500, 'ease-out');
scrollBy(deltaX, deltaY, time, easing)
滑动指定的增量。
squiss.scrollBy(0, 50, 500, 'ease-out');
stop()
停止滑动。
squiss.stop();
refresh()
刷新滑动容器的高度和位置。
squiss.refresh();
示例代码
下面是一个完整的使用 Squiss 实现滑动列表效果的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
-------
------
---- --------------------
--- -----------------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- ------
-------- -------
-----
------
------- --------------------------------------------------------------------------
------- --------------------------------------
--------
----- ------------- - ------------------------------------------
----- ------ - --- ----------------------
------------------------- - -----
------------------- -------- -- -
----------------------------
---
---------
-------
-------在这个示例中，我们使用了 Zepto.js 作为轻量化的 UI 库，创建了一个包含 10 个列表项的滑动列表，然后使用 Squiss 实例化了滑动容器，并设置了自适应高度选项。
最后，我们使用了 Zepto.js 提供的 on 方法监听列表项的点击事件，并输出对应的文本内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a78ccae46eb111f29c