<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;
 }
}

 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
 })
 }

// 左滑時(shí)，出現(xiàn)del，右滑時(shí)，恢復(fù)原位，距離為操作按鈕大小
// 也可以將滑動(dòng)距離作為移動(dòng)距離，但是效果不太好
const distance = this.moveX >= 0 ? 0 : -32
let moveStyle = {}
// 排他性，若某一個(gè)處于滑動(dòng)狀態(tài)時(shí)，其他都回歸原位
if (hasTransition && currentIndex === index) {
 moveStyle.transform = `translateX(${distance}PX)`
 moveStyle.webkitTransform = `translateX(${distance}PX)`
 moveStyle.transition = 'transform 0.3s ease'
 moveStyle.WebkitTransition = 'transform 0.3s ease'
}

handleCurIndex = index => {
 // 設(shè)置當(dāng)前滑動(dòng)項(xiàng)，做排他性
 this.setState({
 currentIndex: index
 })
}

<SwipeItem
 item={item}
 key={item.id}
 index={index}
 currentIndex={currentIndex}
 onSetCurIndex={this.handleCurIndex}
/>