uni移动端中实现左滑删除按钮

1,其实uni中有一个movable-area是可以实现的,而且实现的挺好,但怪就怪我自己实现了一下…

2、u-view更有一个SwipeAction 滑动操作 可太香了,我要换了,溜了溜了

核心两个事件(我改了人家的):

 @touchmove="drawMove($event,item,index)" @touchend="drawEnd"
			drawMove(e,item,index) {
				// console.log(e,item,index)
				console.log("滑动");
				// console.log(e,v,a)
				let nowTime = +new Date()
				console.log(nowTime)
				//节流
				if(nowTime - 500 >this.lastTimer){
					console.log(e)
					console.log(1)
					this.lastTimer = nowTime
					if(this.lastMove == 0){
						this.lastMove = e.changedTouches[0].clientX
					}
					// 如果距离上一次超出了 10像素 && 这一次的位置-上一次的位置 > 0 就是向左滑动的
					if(Math.abs(e.changedTouches[0].clientX - this.lastMove) >10 && e.changedTouches[0].clientX - this.lastMove <0){
						console.log('向左')
						item.setDel = false
						let newItme = item
						this.list.splice(index,1,newItme)
						console.log(this.list)
						// this.$set(this.list[index])
					}
					// 如果距离上一次低 20像素 && 这一次的位置-上一次的位置 < 0 就是向右滑动的
					if(Math.abs(e.changedTouches[0].clientX - this.lastMove) >10 && e.changedTouches[0].clientX- this.lastMove > 0){
						console.log('向右')
						item.setDel = true
						let newItme = item
						this.list.splice(index,1,newItme)
					}
				}
			},
			drawEnd(e) {
				console.log("滑动结束");
				this.lastMove = 0
				this.lastTimer = 0
			},
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值