微信小程式左滑效果

2021-09-24 06:51:58 字數 848 閱讀 6175

"container">

"touch-item }" data-index="}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="}" wx:key="}">

"content">}

"del" catchtap="del" data-index="}">刪除

複製**

.touch-item 

.content

.del

.touch-move-active .content,

.touch-move-active .del

複製**

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) )

}})複製**

微信小程式 左滑刪除效果

1 wxml touch item元素繫結了bindtouchstart bindtouchmove事件 class container class touch item data index bindtouchstart touchstart bindtouchmove touchmove wx ...

微信小程式左滑刪除

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,生...