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

本篇內(nèi)容主要講解“小程序滑動(dòng)刪除功能怎么實(shí)現(xiàn)”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“小程序滑動(dòng)刪除功能怎么實(shí)現(xiàn)”吧!

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

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

　　touchmove: function (e) {

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

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

　　startY = this.data.startY,//開(kāi)始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)超過(guò)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

　　})

　　},

到此，相信大家對(duì)“小程序滑動(dòng)刪除功能怎么實(shí)現(xiàn)”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！