手把手實現微信小程式左滑刪除功能，案例開發，附原始碼

開始擼**～

假設我們有n個列表項來自乙個陣列list，先確定基本的結構

class

="list"
wx:for
="}"
wx:key
>
class
="item"
>
class
="wrap"
>
}view
>
class
="delete"
>
>
刪除text
>
view
>
view
>
view
>

當我們手指向左滑動wrap時，wrap容器向左移動；此時delete從wrap容器之後顯示出來；換句話說我們喜歡wrap容器蓋住delete，使wrap預設在delete上方。

沒錯，我們用樣式來實現效果。

.item

.wrap
.delete

基本的結構就到這裡了，接下來我們為wrap新增觸控事件；

class

="wrap"
data-index
="}"
bindtouchstart
='touchstart'
bindtouchmove
='touchmove'
bindtouchend
='touchend'
>
}view
>

同時有個wrap新增了data-index="}" 這樣我們就可以確定當前觸控的列表項是哪乙個。

接著我們來為他們新增對應的方法。

touchstart:

function
(e))
;}

e.changedtouches[0].pagex

螢幕的左上角的座標為(0,0)，離左上角的距離越大pagex的值也越大。

touchmove:

function
(e))
;}

我們重寫list[this.data.index].x的值，並且將原有的list覆蓋，這樣我們在滑動的時候就能實時的看到元素跟隨手指移動的效果；

這個時候我們可以發現，我們一直往左邊移動，wrap元素就會被推到螢幕的邊緣；這很明顯不是我們想要的效果，我們希望滑動到一定距離後就停止滑動，於是我們為其新增最後乙個方法；

touchend:

function
(e));}
,

list[this.data.index].x = move > 100 ? -180 : 0

裝置 rpx換算px (螢幕寬度/750) px換算rpx (750/螢幕寬度)

iphone5,1rpx = 0.42px,1px = 2.34rpx

iphone6,1rpx = 0.5px,1px = 2rpx

iphone6 plus,1rpx = 0.552px,1px = 1.81rpx

class

="wrap"
style
="transform:translatex(
}px);"
data-index
="}"
bindtouchstart
='touchstart'
bindtouchmove
='touchmove'
bindtouchend
='touchend'
>
}view
>

微信小程式左滑刪除

view class touch item data index wx for wx key view class content view style class item data index bindtouchstart touchstart bindtouchmove touchmove b...

微信小程式 左滑刪除效果

1 wxml touch item元素繫結了bindtouchstart bindtouchmove事件 class container class touch item data index bindtouchstart touchstart bindtouchmove touchmove wx ...

微信小程式實現左滑刪除原始碼

clear左滑刪除 從技術上來說，實現這個效果並不困難，響應一下滑動操作，移動一下元件，再加上些座標計算，狀態記錄就可以了。也有一些文章介紹了在小程式上如何實現這一效果，不過我基本可以確定這些開發者沒有在真機上詳細測試，因為經我實踐發現，在小程式上想要完美實現這個效果幾乎是不可能完成的任務。這一切要...