1. 程式人生 > >【微信小程式】滑動刪除效果

【微信小程式】滑動刪除效果

Page({ data: { items: [], startX: 0, //開始座標 startY: 0 }, onLoad: function (e) { var that = this; common.sys_main(app, that, e); for (var i = 0; i < 10; i++) { this.data.items.push({ content: i + " 向左滑動刪除哦,向左滑動刪除哦,向左滑動刪除哦,向左滑動刪除哦,向左滑動刪除哦", isTouchMove: false //預設全隱藏刪除 }) } this.setData({ items: this
.data.items }); } , //手指觸控動作開始 記錄起點X座標 touchstart: function (e) { //開始觸控時 重置所有刪除 this.data.items.forEach(function (v, i) { if (v.isTouchMove)//只操作為true的 v.isTouchMove = false; }) this.setData({ startX: e.changedTouches[0].clientX, startY: e.changedTouches[0].clientY, items: this
.data.items }) }, //滑動事件處理 touchmove: function (e) { var that = this, index = e.currentTarget.dataset.index,//當前索引 startX = that.data.startX,//開始X座標 startY = that.data.startY,//開始Y座標 touchMoveX = e.changedTouches[0].clientX,//滑動變化座標 touchMoveY = e.changedTouches[0].clientY,//滑動變化座標
//獲取滑動角度 angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); that.data.items.forEach(function (v, i) { v.isTouchMove = false //滑動超過30度角 return if (Math.abs(angle) > 30) return; if (i == index) { if (touchMoveX > startX) //右滑 v.isTouchMove = false else //左滑 v.isTouchMove = true } }) //更新資料 that.setData({ items: that.data.items }) }, /** * 計算滑動角度 * @param {Object} start 起點座標 * @param {Object} end 終點座標 */ angle: function (start, end) { var _X = end.X - start.X, _Y = end.Y - start.Y //返回角度 /Math.atan()返回數字的反正切值 return 360 * Math.atan(_Y / _X) / (2 * Math.PI); }, //刪除事件 del: function (e) { this.data.items.splice(e.currentTarget.dataset.index, 1) this.setData({ items: this.data.items }) }})