小程序怎样实现向左滑动删除功能(小程序,移动开发)

微信小程序 向左滑动删除功能的实现

实现效果图：

实现代码：

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件

<viewclass="container"><viewclass="touch-item{{item.isTouchMove?'touch-move-active':''}}"data-index="{{index}}"bindtouchstart="touchstart"bindtouchmove="touchmove"wx:for="{{items}}"wx:key=""><viewclass="content">{{item.content}}</view><viewclass="del"catchtap="del"data-index="{{index}}">删除</view></view></view>

2、wxss flex布局、css3动画

.touch-item{font-size:14px;display:flex;justify-content:space-between;border-bottom:1pxsolid#ccc;width:100%;overflow:hidden}.content{width:100%;padding:10px;line-height:22px;margin-right:0;-webkit-transition:all0.4s;transition:all0.4s;-webkit-transform:translateX(90px);transform:translateX(90px);margin-left:-90px}.del{background-color:orangered;width:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;-webkit-transform:translateX(90px);transform:translateX(90px);-webkit-transition:all0.4s;transition:all0.4s;}.touch-move-active.content,.touch-move-active.del{-webkit-transform:translateX(0);transform:translateX(0);}

3、js 注释很详细

varapp=getApp()Page({data:{items:[],startX:0,//开始坐标startY:0},onLoad:function(){for(vari=0;i<10;i++){this.data.items.push({content:i+"向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",isTouchMove:false//默认全隐藏删除})}this.setData({items:this.data.items})},//手指触摸动作开始记录起点X坐标touchstart:function(e){//开始触摸时重置所有删除this.data.items.forEach(function(v,i){if(v.isTouchMove)//只操作为true的v.isTouchMove=false;})this.setData({startX:e.changedTouches[0].clientX,startY:e.changedTouches[0].clientY,items:this.data.items})},//滑动事件处理touchmove:function(e){varthat=this,index=e.currentTarget.dataset.index,//当前索引startX=that.data.startX,//开始X坐标startY=that.data.startY,//开始Y坐标touchMoveX=e.changedTouches[0].clientX,//滑动变化坐标touchMoveY=e.changedTouches[0].clientY,//滑动变化坐标//获取滑动角度angle=that.angle({X:startX,Y:startY},{X:touchMoveX,Y:touchMoveY});that.data.items.forEach(function(v,i){v.isTouchMove=false//滑动超过30度角returnif(Math.abs(angle)>30)return;if(i==index){if(touchMoveX>startX)//右滑v.isTouchMove=falseelse//左滑v.isTouchMove=true}})//更新数据that.setData({items:that.data.items})},/***计算滑动角度*@param{Object}start起点坐标*@param{Object}end终点坐标*/angle:function(start,end){var_X=end.X-start.X,_Y=end.Y-start.Y//返回角度/Math.atan()返回数字的反正切值return360*Math.atan(_Y/_X)/(2*Math.PI);},//删除事件del:function(e){this.data.items.splice(e.currentTarget.dataset.index,1)this.setData({items:this.data.items})}})