最近做了一個(gè)類似系統(tǒng)操作的左滑刪除的demo，用的taro框架，和大家分享一下~

首先需要考慮的有以下幾點(diǎn)：

1）布局；
2）判斷是左滑還是右滑，左滑時(shí)出現(xiàn)刪除，右滑時(shí)回歸原位；
3）排他性，意思是某一個(gè)時(shí)間只能有一個(gè)項(xiàng)出現(xiàn)刪除，當(dāng)有另一個(gè)出現(xiàn)刪除時(shí)，上一個(gè)自動(dòng)回歸原位。

我將列表項(xiàng)封裝成一個(gè)組件，而整個(gè)列表是另一個(gè)組件。

接下來先說列表項(xiàng)這個(gè)組件，逐一解決以上這些問題：

1）布局

我采用的是列表項(xiàng)最外層套一個(gè)盒子，這個(gè)盒子寬度設(shè)置為100vw，并且overflow:hidden。而列表項(xiàng)要包括內(nèi)容和刪除按鈕，內(nèi)容寬度為屏幕寬度，而刪除按鈕定位到右邊，所以整個(gè)列表項(xiàng)寬度是超過100vw的。描述可能沒有那么清晰，直接上代碼：

<View className='swipe-item'>  <View className='swipe-item-wrap' style={moveStyle}>   <View    className='swipe-item-left'    onTouchStart={this.handleTouchStart}    onTouchMove={this.handleTouchMove.bind(this, index)}    onTouchEnd={this.handleTouchEnd}   >    <View>{item.title}</View>   </View>   <View className='swipe-item-right'>    <View className='swipe-item-del'>del</View>   </View>  </View></View>.swipe-item { width: 100vw; overflow: hidden; line-height: 24PX; height: 24PX; text-align: center; margin-bottom: 10PX; &-wrap {  width: calc(100vw + 32PX);  height: 100%;  position: relative; } &-left {  width: 100vw; } &-right {  width: 32PX;  height: 100%;  background: pink;  position: absolute;  right: 0;  top: 0; }}

好了，布局結(jié)束之后，接下來是第二個(gè)問題：

2）判斷是左滑還是右滑，左滑時(shí)出現(xiàn)刪除，右滑時(shí)回歸原位

可以看到上面的代碼，我已經(jīng)在列表項(xiàng)左邊部分加了touch的一系列事件，下面就來分析下這幾個(gè)事件

上代碼了~

 handleTouchStart = e => {   this.startX = e.touches[0].pageX  this.startY = e.touches[0].pageY } handleTouchMove (index, e) {  // 若想阻止冒泡且最外層盒子為scrollView，不可用e.stopPropogagation()，否則頁面卡死  this.currentX = e.touches[0].pageX  this.moveX = this.currentX - this.startX  this.moveY = e.touches[0].pageY - this.startY  // 縱向移動(dòng)時(shí)return  if (Math.abs(this.moveY) > Math.abs(this.moveX)) {   return  }  // 滑動(dòng)超過一定距離時(shí)，才觸發(fā)  if (Math.abs(this.moveX) < 10 ) {   return  }  else {   // 否則沒有動(dòng)畫效果   this.setState({    hasTransition: true   })  }  // 通知父組件當(dāng)前滑動(dòng)的為第幾項(xiàng)  this.props.onSetCurIndex(index) } handleTouchEnd = e => {  // 結(jié)束時(shí)，置為true，否則render時(shí)不生效  this.setState({   hasTransition: true  }) }