微信小程式 左滑刪除效果

2021-08-07 14:39:01 字數 1202 閱讀 7306

1、wxml touch-item元素繫結了bindtouchstart、bindtouchmove事件

class="container">

class="touch-item }"

data-index="}"

bindtouchstart="touchstart"

bindtouchmove="touchmove"

wx:for="}"

wx:key="">

class="content">

}view>

class="del"

catchtap="del"

data-index="

}">刪除view>

view>

view>

2、wxss flex布局、css3動畫

.touch-item

.content

.del

.touch-move-active

.content,

.touch-move-active

.del

3、js

page(,

onload: function

() )

}this.setdata()

},//手指觸控動作開始 記錄起點x座標

touchstart: function

(e) )

this.setdata()

},//滑動事件處理

touchmove: function

(e) , );

that.data.items.foreach(function

(v, i)

})//更新資料

that.setdata()

},/**

* 計算滑動角度

* @param start 起點座標

* @param end 終點座標

*/angle: function

(start, end) ,

//刪除事件

del: function

(e) )

}})雖然我還看不太懂,懵逼臉,但是我相信,努力總會有結果,記錄下來,多看,會成為我自己的東西的。

微信小程式左滑效果

container touch item data index bindtouchstart touchstart bindtouchmove touchmove wx for wx key content del catchtap del data index 刪除 複製 touch item c...

微信小程式左滑刪除

view class touch item data index wx for wx key view class content view style class item data index bindtouchstart touchstart bindtouchmove touchmove b...

微信小程式左滑刪除未操作有復位效果

刪除 view view movable view movable area view 2.wxss pages test test.wxss page.m a.data list.d box.data 3.js pages test test.js page pcontrolwidth 200,生...