移动端实现列表左滑删除(react)

栏目: 服务器 · 发布时间: 5年前

内容简介:最近做了一个类似系统操作的左滑删除的demo,用的taro框架,和大家分享一下~首先需要考虑的有以下几点:1)布局;

最近做了一个类似系统操作的左滑删除的demo,用的taro框架,和大家分享一下~

首先需要考虑的有以下几点:

1)布局;

2)判断是左滑还是右滑,左滑时出现删除,右滑时回归原位;

3)排他性,意思是某一个时间只能有一个项出现删除,当有另一个出现删除时,上一个自动回归原位。

我将列表项封装成一个组件,而整个列表是另一个组件。

接下来先说列表项这个组件,逐一解决以上这些问题:

1)布局

我采用的是列表项最外层套一个盒子,这个盒子宽度设置为100vw,并且overflow:hidden。而列表项要包括内容和删除按钮,内容宽度为屏幕宽度,而删除按钮定位到右边,所以整个列表项宽度是超过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;
  }
}

好了,布局结束之后,接下来是第二个问题:

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

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

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


以上所述就是小编给大家介绍的《移动端实现列表左滑删除(react)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

零基础学算法

零基础学算法

戴艳 / 机械工业出版社 / 2009-1 / 59.80元

零基础学算法,ISBN:9787111284048,作者:戴艳 等编著一起来看看 《零基础学算法》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具