微信小程序左右滑動刪除事件詳解

第微信小程序左右滑動刪除事件詳解本文實(shí)例為大家分享了微信小程序左右滑動刪除事件，供大家參考，具體內(nèi)容如下

效果圖

上代碼

scroll-viewscroll-yenable-back-to-top

view

blockwx:for="{{list}}"wx:for-item="item"wx:for-index="index"wx:key="index"

viewclass="list{{item.isTouchMove'touch-move-active':''}}"

bindtouchstart="touchStart"bindtouchmove="touchMove"data-index="{{index}}"

view{{item.id}}--{{item.title}}/view

viewbindtap="delList"data-index="{{index}}"刪除/view

/view

/block

/view

/scroll-view

/*列表*/

.list{

display:flex;

justify-content:space-between;

width:100%;

height:100rpx;

line-height:100rpx;

overflow:hidden;

text-align:center;

border-bottom:1pxsolid#cccccc;

/*列表內(nèi)容*/

.list.txt{

flex-grow:1;

width:100%;

margin-left:-150rpx;

background-color:#fff;

/*刪除按鈕*/

.list.del{

flex-grow:0;

width:150rpx;

color:#fff;

background-color:#fe3e2f;

.list.txt,.list.del{

transform:translateX(150rpx);

transition:all0.4s;

.touch-move-active.txt,.touch-move-active.del{

-webkit-transform:translateX(0);

transform:translateX(0);

}

js:

Page({

/**

*頁面的初始數(shù)據(jù)

*/

data:{

list:[

{id:"0001",title:"商品1"},

{id:"0002",title:"商品2"},

//

],

scrollHeight:0,

//scroll-view高度

startX:0,

//開始X坐標(biāo)

startY:0,

//開始Y坐標(biāo)

},

//手指觸摸動作開始

touchStart:function(e){

letthat=this;

//開始觸摸時(shí)重置所有刪除

that.data.list.forEach(function(v,i){

if(v.isTouchMove)v.isTouchMove=false;//只操作為true的

})

//記錄手指觸摸開始坐標(biāo)

that.setData({

startX:e.changedTouches[0].clientX,

//開始X坐標(biāo)

startY:e.changedTouches[0].clientY,

//開始Y坐標(biāo)

list:that.data.list

})

},

//手指觸摸后移動

touchMove:function(e){

letthat=this,

index=e.currentTarget.dataset.index,

//當(dāng)前下標(biāo)

startX=that.data.startX,

//開始X坐標(biāo)

startY=that.data.startY,

//開始Y坐標(biāo)

touchMoveX=e.changedTouches[0].clientX,//滑動變化坐標(biāo)

touchMoveY=e.changedTouches[0].clientY,//滑動變化坐標(biāo)

//獲取滑動角度

angle=that.angle({X:startX,Y:startY},{X:touchMoveX,Y:touchMoveY});

//判斷滑動角度

that.data.list.forEach(function(v,i){

v.isTouchMove=false

//滑動超過30度角return

if(Math.abs(angle)30)return;

if(i==index){

//右滑

if(touchMoveXstartX)

v.isTouchMove=false

//左滑

else

v.isTouchMove=true

}

})

//更新數(shù)據(jù)

that.setData({

list:that.data.list

})

},

//計(jì)算滑動角度

angle:function(start,end){

letthat=this,

_X=end.X-start.X,

_Y=end.Y-start.Y;

//返回角度/Math.atan()返回?cái)?shù)字的反正切值

return360*Math.atan(_Y/_X)/(2*Math.PI);

},

//刪除

delList:function(e){

letthat=this,

index=e.currentTarget.dataset.index;

//當(dāng)前下標(biāo)

//切割當(dāng)前下標(biāo)元素，更新數(shù)據(jù)

that.data.list.splice(index,1);

that.setData({

list:that.data.list

})

},

/**

*生命周期函數(shù)--監(jiān)聽頁面加載

*/

onLoad:function(options){

letthat=this;

/