小程序滑動(dòng)刪除功能及實(shí)現(xiàn)方式

　　小程序滑動(dòng)刪除功能在應(yīng)用中很常見，一般是向左滑動(dòng)列表可刪除項(xiàng)目，那么這種形式要如何實(shí)現(xiàn)呢？

小程序滑動(dòng)刪除效果示例

　　每個(gè)列表項(xiàng)綁定touchstart和touchmove事件，監(jiān)聽滑動(dòng)手勢，確定滑動(dòng)角度，判斷滑動(dòng)是否有效 列表數(shù)據(jù)源每一項(xiàng)包含標(biāo)志值isTouchMove，用來確定此項(xiàng)是否滑動(dòng)成功 列表項(xiàng)有兩個(gè)類，根據(jù)isTouchMove的值來確定渲染那個(gè)類 刪除時(shí)直接操作數(shù)據(jù)源

　　touchmove: function (e) {

　　let index = e.currentTarget.dataset.index,//當(dāng)前索引

　　startX = this.data.startX,//開始X坐標(biāo)

　　startY = this.data.startY,//開始Y坐標(biāo)

　　touchMoveX = e.changedTouches[0].clientX,//滑動(dòng)變化坐標(biāo)

　　touchMoveY = e.changedTouches[0].clientY,//滑動(dòng)變化坐標(biāo)

　　//獲取滑動(dòng)角度

　　angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });

　　this.data.list.forEach(function (v, i) {

　　v.isTouchMove = false

　　//滑動(dòng)超過30度角 return

　　if (Math.abs(angle) > 30) return;

　　if (i == index) {

　　if (touchMoveX > startX) //右滑

　　v.isTouchMove = false

　　else //左滑

　　v.isTouchMove = true

　　}

　　})

　　// //更新數(shù)據(jù)

　　this.setData({

　　list: this.data.list

　　})

　　},

　HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。