简介
ng2-bootstrap-list-swipe 是一个 Angular 2+ 的 npm 包，用于在移动端为列表项添加 swipe 左右滑动事件，实现类似 iOS 中 swipe to delete 的效果。该包基于 Bootstrap 4 和 HammerJS 开发，不仅支持左右滑动删除操作，还能自定义滑动方向和滑动距离等参数，非常灵活易用。
安装
ng2-bootstrap-list-swipe 依赖于 Bootstrap 4 和 HammerJS，因此在安装之前需要先安装这两个库：
npm i bootstrap hammerjs --save
接着安装 ng2-bootstrap-list-swipe：
npm i ng2-bootstrap-list-swipe --save
使用
首先在 Angular 项目中引入 ng2-bootstrap-list-swipe 模块和 Bootstrap 样式：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------- - ---- --------------------------- ------ --------------------------------------- ------ - ------------ - ---- ------------------ ----------- -------- --------------- ------------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- --
在组件模板中，使用 bs-list-swipe 指令将列表项包裹起来，并用 bs-list-swipe-actions 指令添加左右滑动按钮：
<ul>
<li *ngFor="let item of items" bs-list-swipe [bsSwipeActionOptions]="{swipeLeft: true, swipeRight: true}">
{{ item }}
<div bs-list-swipe-actions>
<button class="btn btn-danger" (click)="deleteItem(item)">Delete</button>
</div>
</li>
</ul>其中，bsSwipeActionOptions 属性用于设置左右滑动的方向和距离，具体可配置项如下：
swipeLeft（boolean）：是否启用左滑动事件swipeRight（boolean）：是否启用右滑动事件swipeDistance（number）：超过此距离时视为有效滑动事件（单位：像素）swipeThreshold（number）：速度达到此值时视为有效滑动事件（单位：像素/毫秒）
示例
下面是一个完整的模板示例，可供参考：
<ul>
<li *ngFor="let item of items" bs-list-swipe [bsSwipeActionOptions]="{swipeLeft: true, swipeRight: true}">
{{ item }}
<div bs-list-swipe-actions>
<button class="btn btn-danger" (click)="deleteItem(item)">Delete</button>
</div>
</li>
</ul>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---------------------------- -------
----
--- ----------- ---- -- ------ ------------- ----------------------------------- ----- ----------- -------
-- ---- --
---- ----------------------
------- ---------- ----------- ------------------------------------------
------
-----
-----
--
------- ---- - ----------- ----- -------- -- ---
--
------ ----- ------------ -
----- - --------- --------- --------- ----------
---------------- ------- -
------------------------------------------- ---
-
-总结
ng2-bootstrap-list-swipe 是一个简单、实用的 npm 包，可帮助你快速实现移动端列表项的 swipe 操作。通过本文的介绍，相信大家已经基本掌握了该库的使用方法。在实际项目中，我们可以根据需要进行更灵活的配置和定制，以满足具体的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448dacbf