先上效果圖
滑動之前
滑動之後
覺得效果圖不錯的朋友請繼續往下看
先上一段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...