最近做了一个类似系统操作的左滑删除demo，使用taro框架，分享给大家~首先需要以下几点考虑：1)布局；2）判断是向左滑动还是向右滑动，向左滑动删除，向右滑动返回原位；3)排他性，即在某个时间只能删除一个项目，当另一个项目被删除时，前一个项目会自动回到原来的位置。我将列表项包装到一个组件中，将整个列表包装到另一个组件中。下面先说说列表项组件，上面的问题一一解决：1）我在列表项的最外层用了一个盒子来布局。这个框的宽度设置为100vw，overflow:hidden。列表项必须包含内容和删除按钮。内容的宽度为屏幕宽度，删除按钮位于右侧，所以整个列表项的宽度超过了100vw。描述的可能不是那么清楚，直接上代码：'onTouchStart={this.handleTouchStart}onTouchMove={this.handleTouchMove.bind(this,index)}onTouchEnd={this.handleTouchEnd}>{item.title}del.swipe-item{width:100vw;溢出：隐藏；行高：24PX；高度：24PX；文本对齐：居中；margin-bottom:10PX;&-wrap{width:calc(100vw+32PX);高度：100%；位置：相对；}&-left{宽度：100vw；}&-right{宽度：32PX；高度：100%；背景：粉色；位置：绝对；右：0；顶部：0；}}好了，布局结束，接下来的问题是：2）判断左右滑动，向左滑动删除，向右滑动回到原位，可以看到如上代码，我在listitem的左边部分添加了一系列的touch事件，我们来分析一下这些事件判断当前幻灯片是左还是右。向左滑动时e.touches[0].pageX变小，向右滑动时变大。为了防止一只手误操作，我加了一个判断，滑动超过一定距离才移动。并记录当前滑动的是哪个item。可以通过在渲染时给列表项添加样式来实现，也就是第一段代码中的样式。touchend:滑动结束代码~handleTouchStart=e=>{this.startX=e.touches[0].pageXthis.startY=e.touches[0].pageY}handleTouchMove(index,e){//如果你想防止冒泡，最外层的框是scrollView，e.stopPropogagation()不可用，否则页面卡住this.currentX=e.touches[0].pageXthis.moveX=this.currentX-this.startXthis.moveY=e.touches[0].pageY-this.startY//当垂直移动时returnif(Math.abs(this.moveY)>Math.abs(this.moveX)){return}//仅当滑动超过一定distanceTriggerif(Math.abs(this.moveX)<10){return}else{//否则没有动画效果this.setState({hasTransition:true})}//通知父组件当前是哪个item滑动这个。props.onSetCurIndex(index)}handleTouchEnd=e=>{//最后设置为true，否则渲染Event时不会生效，在父组件中设置当前滑动项的index值，然后通过props值传给子组件，在渲染的时候加上判断。//向左滑动时出现del，向右滑动时回到原位，距离为操作按钮的大小//也可以使用滑动距离作为移动距离，但效果不是很好constdistance=this.moveX>=0?0:-32letmoveStyle={}//独占，如果一个处于滑动状态，其他会回到原来的位置if(hasTransition&¤tIndex===index){moveStyle.transform=`translateX(${distance}PX)`移动样式。webkitTransform=`translateX(${distance}PX)`moveStyle.transition='transform0.3sease'moveStyle.WebkitTransition='transform0.3sease'}这是列表项的结尾，我们在列表中调用列表项component~handleCurIndex=index=>{//设置当前滑动项，做独占this.setState({currentIndex:index})}好了，就这些了，可能有点乱，可以移步demo源码~
