html5列表左滑删除,前端实现列表左滑删除（react）

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

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

1)布局；

2)判断是左滑还是右滑，左滑时出现删除，右滑时回归原位；

3)排他性，意思是某一个时间只能有一个项出现删除，当有另一个出现删除时，上一个自动回归原位。

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

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

1)布局

我采用的是列表项最外层套一个盒子，这个盒子宽度设置为100vw，并且overflow:hidden。而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过100vw的。描述可能没有那么清晰，直接上代码：

className='swipe-item-left'

onTouchStart={this.handleTouchStart}

onTouchMove={this.handleTouchMove.bind(this, index)}

onTouchEnd={this.handleTouchEnd}

>

{item.title}

del

.swipe-item {

width: 100vw;

overflow: hidden;

line-height: 24PX;

height: 24PX;

text-align: center;