最近做了一个类似系统操作的左滑删除的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;