前端实现列表左滑删除（react）

everfight 发布于2019-08-02 15:27 / 1062人阅读

摘要：而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过的。来判断当前是左滑还是右滑，左滑时在减小，而右滑时变大。并且记录下当前滑动的是第几项。

最近做了一个类似系统操作的左滑删除的demo，用的taro框架，和大家分享一下~
首先需要考虑的有以下几点：
1）布局；
2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位；
3）排他性，意思是某一个时间只能有一个项出现删除，当有另一个出现删除时，上一个自动回归原位。
我将列表项封装成一个组件，而整个列表是另一个组件。
接下来先说列表项这个组件，逐一解决以上这些问题：
1）布局
我采用的是列表项最外层套一个盒子，这个盒子宽度设置为100vw，并且overflow:hidden。而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过100vw的。描述可能没有那么清晰，直接上代码：


    
      
        {item.title}
      
      
        del
      
    


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

好了，布局结束之后，接下来是第二个问题：
2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位
可以看到上面的代码，我已经在列表项左边部分加了touch的一系列事件，下面就来分析下这几个事件

touchstart：开始时，要获取当前位置

touchmove：滑动时，获取滑动时的位置，同时纵向滑动时阻止。来判断当前是左滑还是右滑，左滑时e.touches[0].pageX在减小，而右滑时变大。为了防止一个手误操作，我加了一个判断，当滑动超过一定距离时才动。并且记录下当前滑动的是第几项。在render的时候给列表项加一个样式就可以实现了，就是第一段代码中的style。

touchend：滑动结束

上代码了~

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

3）排他性
这个主要是通过触发父组件的一个事件，在父组件中设置一个当前滑动项的index值，然后再通过props值传入子组件，渲染的时候加一个判断实现。

// 左滑时，出现del，右滑时，恢复原位，距离为操作按钮大小
// 也可以将滑动距离作为移动距离，但是效果不太好
const distance = this.moveX >= 0 ? 0 : -32
let moveStyle = {}
// 排他性，若某一个处于滑动状态时，其他都回归原位
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 => {
    // 设置当前滑动项，做排他性
    this.setState({
      currentIndex: index
    })
}

好了，大致就是这些了，可能有点混乱，大家可以移步demo源码~

私有云 GPU服务器左滑删除前端react 前端框架react react实现轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54138.html

前端实现列表左滑删除（react）

摘要：而列表项要包括内容和删除按钮，内容宽度为屏幕宽度，而删除按钮定位到右边，所以整个列表项宽度是超过的。来判断当前是左滑还是右滑，左滑时在减小，而右滑时变大。并且记录下当前滑动的是第几项。最近做了一个类似系统操作的左滑删除的demo，用的taro框架，和大家分享一下~首先需要考虑的有以下几点：1）布局；2）判断是左滑还是右滑，左滑时出现删除，右滑时回归原位；3）排他性，意思是某一个时间只...

sewerganger 2019-08-23 18:28 评论0 收藏0
小程序开发：左滑删除

摘要：，上层使用绝对定位，我们操纵属性的值来实现像左移动。，我们通过微信小程序提供的对象和个有关手指触摸的函数，，来实现随手指移动。省略数据删除部分中根据绑定的事件触发删除按钮，用户点击删除，发送请求，根据返回值对用户进行反馈。导语首先声明两点：思路以及代码，是根据资料进行一些修改以及补充，原文地址在此下面的只是 demo，各位根据自己的需要进行修改完善实现的思路摘抄如下 1...

missonce 2019-07-01 11:14 评论0 收藏0
H5仿手Q左滑删除功能组件

摘要：背景前不久遇到一个需求，列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定体验了一下手原生滑动功能，在此之前对于滑块的具体动效提出了几个问题。最终效果组件源码后话同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。背景前不久遇到一个需求，h5列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定 showImg(https://segmentfa...

laznrbfe 2019-08-29 11:09 评论0 收藏0
H5仿手Q左滑删除功能组件

摘要：背景前不久遇到一个需求，列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定体验了一下手原生滑动功能，在此之前对于滑块的具体动效提出了几个问题。最终效果组件源码后话同事反馈没有给滑动开始或完成时暴露一个自定义事件的接口。。背景前不久遇到一个需求，h5列表页实现左滑删除功能。首先对下文有关滑块的指代标识做出统一规定 showImg(https://segmentfa...

mayaohua 2019-08-21 14:19 评论0 收藏0