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 相关文章推荐
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
Bootstrap布局方式详解
May 27 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
深入详解JS函数的柯里化
Jun 09 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
PHP数字格式化
2006/12/06 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python采集百度百科的方法
2015/06/05 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python Selenium 库的使用技巧
2020/10/16 Python
幼师自荐信范文
2013/10/06 职场文书
师说教学反思
2014/02/07 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
目标责任书格式
2014/07/28 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
五心教育心得体会
2014/09/04 职场文书
学校财务管理制度
2015/08/04 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js
全网非常详细的pytest配置文件
2022/07/15 Python