微信小程式實現側滑

2021-09-28 22:33:57 字數 1059 閱讀 3308

先上效果圖

滑動之前

滑動之後

覺得效果圖不錯的朋友請繼續往下看

先上一段html**

德國nestlé雀巢beba貝巴適度水解奶粉3段(10個月以上)800g

刪除

下面是css

.touch-item .content .item_img .item_title .del .touch-move-active .content, .touch-move-active .del

//

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

touchstart: function

(e) )

},//

滑動事件處理

touchmove: function

(e) , );

varistouchmove

//滑動超過30度角 return

if (math.abs(angle) > 30) return

;

if (touchmovex > startx)

else

//更新資料

that.setdata()

},/*

* * 計算滑動角度

* @param start 起點座標

* @param end 終點座標

*/angle:

function

(start, end)

ps:如有錯誤,歡迎指正。共同學習,共同進步

更多專業前端知識,請上

【猿2048】www.mk2048.com

微信小程式側滑刪除

直接上乾貨吧 wxml 刪除wxss view,label,textarea,input hd con hd con listitem hd con list hd con listitem.active list hd con list info hd con list info toph hd ...

仿微信swipebacklayout側滑介面

1 新增依賴 compile me.imid.swipebacklayout.lib library 1.0.0 2 基類activity繼承swipebackactivity baseactivity extends swipebackactivity3 不需要右滑的activity在oncrea...

微信小程式左滑效果

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