微信小程式左滑刪除功能開發案例

開始擼**～

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

}刪除    

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

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

.item

.wrap
.delete

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

}

同時有個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

}

微信小程式左滑刪除

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

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

開始擼 假設我們有n個列表項來自乙個陣列list，先確定基本的結構 class list wx for wx key class item class wrap view class delete 刪除text view view view 在item中分別放入wrap作為顯示專案內容的容器，與de...

微信小程式 左滑刪除效果

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