如何用React在移动端实现列表左滑删除功能？

本文共计1198个文字，预计阅读时间需要5分钟。

最近完成了一个类似系统操作的左滑删除demo，使用的是taro框架，与大家分享下。首先需要考虑以下几点：

1.布局；

2.判断是左滑还是右滑，左滑时出现删除，右滑时返回原位。

最近做了一个类似系统操作的左滑删除的demo，用的taro框架，和大家分享一下~

首先需要考虑的有以下几点：

1）布局；
2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位；
3）排他性，意思是某一个时间只能有一个项出现删除，当有另一个出现删除时，上一个自动回归原位。

我将列表项封装成一个组件，而整个列表是另一个组件。

接下来先说列表项这个组件，逐一解决以上这些问题：

1）布局

我采用的是列表项最外层套一个盒子，这个盒子宽度设置为100vw，并且overflow:hidden。而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过100vw的。