大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
最近做了一个类似系统操作的左滑删除的demo,用的taro框架,和大家分享一下~
成都创新互联公司长期为上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为高州企业提供专业的做网站、成都网站建设,高州网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。
首先需要考虑的有以下几点:
1)布局;
2)判断是左滑还是右滑,左滑时出现删除,右滑时回归原位;
3)排他性,意思是某一个时间只能有一个项出现删除,当有另一个出现删除时,上一个自动回归原位。
我将列表项封装成一个组件,而整个列表是另一个组件。
接下来先说列表项这个组件,逐一解决以上这些问题:
1)布局
我采用的是列表项最外层套一个盒子,这个盒子宽度设置为100vw,并且overflow:hidden。而列表项要包括内容和删除按钮,内容宽度为屏幕宽度,而删除按钮定位到右边,所以整个列表项宽度是超过100vw的。描述可能没有那么清晰,直接上代码:
.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; } } {item.title} del
好了,布局结束之后,接下来是第二个问题:
2)判断是左滑还是右滑,左滑时出现删除,右滑时回归原位
可以看到上面的代码,我已经在列表项左边部分加了touch的一系列事件,下面就来分析下这几个事件
上代码了~
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 }) }
好了,大致就是这些了,可能有点混乱,大家可以移步demo源码~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。