react 移动端实现列表左滑删除的示例代码

<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
  // 纵向移动时return
  if (Math.abs(this.moveY) > Math.abs(this.moveX)) {
   return
  }
  // 滑动超过一定距离时，才触发
  if (Math.abs(this.moveX) < 10 ) {
   return
  }
  else {
   // 否则没有动画效果
   this.setState({
    hasTransition: true
   })
  }
  // 通知父组件当前滑动的为第几项
  this.props.onSetCurIndex(index)
 }

 handleTouchEnd = e => {
  // 结束时，置为true，否则render时不生效
  this.setState({
   hasTransition: true
  })
 }

// 左滑时，出现del，右滑时，恢复原位，距离为操作按钮大小
// 也可以将滑动距离作为移动距离，但是效果不太好
const distance = this.moveX >= 0 "htmlcode">

handleCurIndex = index => {
  // 设置当前滑动项，做排他性
  this.setState({
   currentIndex: index
  })
}

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




好了，大致就是这些了，可能有点混乱，大家可以移步demo源码~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。