模板小程序有哪些优势_react 移动端完成列表左滑

react 移动端实现列表左滑删除的示例代码       这篇文章主要介绍了react 移动端实现列表左滑删除的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2)判断是左滑还是右滑,左滑时出现删除,右滑时回归原位;
3)排他性,意思是某一个时间只能有一个项出现删除,当有另一个出现删除时,上一个自动回归原位。

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

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

1)布局

我采用的是列表项最外层套一个盒子,这个盒子宽度设置为100vw,并且overflow:hidden。而列表项要包括内容和删除按钮,内容宽度为屏幕宽度,而删除按钮定位到右边,所以整个列表项宽度是超过100vw的。描述可能没有那么清晰,直接上代码:

 View className='swipe-item' 
 View className='swipe-item-wrap' '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.pro凡科抠图.onSetCurIndex(index)
 handleTouchEnd = e = {
 // 结束时,置为true,否则render时不生效
 this.setState({
 hasTransition: true

3)排他性

这个主要是通过触发父组件的一个事件,在父组件中设置一个当前滑动项的index值,然后再通过pro凡科抠图值传入子组件,渲染的时候加一个判断实现。

// 左滑时,出现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}

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

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




扫描二维码分享到微信