DDR爱好者之家

react 移动端实现列表左滑删除的示例代码
站长资源 2024/11/26 佚名
34 1538
DDR爱好者之家 Design By 杰米

最近做了一个类似系统操作的左滑删除的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 "htmlcode">



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

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







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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米