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


Posted in Javascript onJuly 04, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
javascript 面向对象继承
Nov 26 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
javascript冒泡排序小结
Apr 10 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 #Javascript
vue如何限制只能输入正负数及小数
Jul 04 #Javascript
Vue项目中ESlint规范示例代码
Jul 04 #Javascript
你或许不知道的一些npm实用技巧
Jul 04 #Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 #Javascript
angular6开发steps步骤条组件
Jul 04 #Javascript
You might like
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
python循环监控远程端口的方法
2015/03/14 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
门诊手术室工作制度
2014/01/30 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2014年政协工作总结
2014/12/09 职场文书
庐山导游词
2015/02/03 职场文书
手机销售员岗位职责
2015/04/11 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书