直接進入正題哮针，我們需要做的就是通過手指滑動列表項后，右側(cè)出現(xiàn)刪除从隆；
比如說像這樣：
向左邊滑動后出現(xiàn)如下的效果：
開始擼代碼～
假設(shè)我們有N個列表項來自一個數(shù)組list诚撵，先確定基本的結(jié)構(gòu)
<view class="list" wx:for="{{list}}" wx:key>
<view class="item">
<view class="wrap">{{item}}</view>
<view class="delete"><text>刪除</text></view>
</view>
</view>
在item中分別放入wrap作為顯示項目內(nèi)容的容器，與delete刪除按鈕的容器键闺。
當我們手指向左滑動wrap時，wrap容器向左移動澈驼；此時delete從wrap容器之后顯示出來辛燥；換句話說我們喜歡wrap容器蓋住delete，使wrap默認在delete上方缝其。
沒錯挎塌，我們用樣式來實現(xiàn)效果。
.item{ position:relative; }
.wrap{
position:absolute;z-index:2; top:0;left:0;
backgorund:#fff;width:100%;height:100%;
}
.delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}
好了内边，這些我們需要的核心樣式榴都，為了wrap能100%蓋住delete，我們給到它寬高都是百分之百漠其，并且填充背景顏色是必然的嘴高，至于要怎么美化可自行添加需要的樣式。
基本的結(jié)構(gòu)就到這里了和屎，接下來我們?yōu)閣rap添加觸摸事件拴驮；
<view class="wrap"
data-index="{{index}}"
bindtouchstart='touchstart'
bindtouchmove='touchmove'
bindtouchend='touchend'
>{{item}}</view>
我們綁定了三個觸摸事件，分別是柴信，觸摸開始套啤，觸摸時移動以及觸摸結(jié)束。
同時有個wrap添加了data-index="{{index}}" 這樣我們就可以確定當前觸摸的列表項是哪一個随常。
接著我們來為他們添加對應(yīng)的方法潜沦。
touchstart:function(e){
this.setData({
index: e.currentTarget.dataset.index,
Mstart: e.changedTouches[0].pageX
});
}
通過touchstart方法我們將當前觸發(fā)事件元素的索引保存到index萄涯，并且獲得當前手指觸摸的坐標位置e.changedTouches[0].pageX；
e.changedTouches[0].pageX
屏幕的左上角的坐標為(0,0)唆鸡，離左上角的距離越大pageX的值也越大窃判。
下一步，當我們移動手指向左滑動時：
touchmove: function (e) {
//列表項數(shù)組
let list = this.data.list;
//手指在屏幕上移動的距離
//移動距離 = 觸摸的位置 - 移動后的觸摸位置
let move = this.data.Mstart - e.changedTouches[0].pageX;
// 這里就使用到我們之前記錄的索引index
//比如你滑動第一個列表項index就是0喇闸，第二個列表項就是1袄琳，···
//通過index我們就可以很準確的獲得當前觸發(fā)的元素，當然我們需要在事前為數(shù)組list的每一項元素添加x屬性
list[this.data.index].x = move > 0 ? -move : 0;
this.setData({
list: list
});
}
當移動后的觸摸位置小于最初觸發(fā)的位置時燃乍，說明手指是向左滑動唆樊，因為pageX越小就越向屏幕邊緣靠近；這個時候move就是wrap容器需要向左移動的距離刻蟹。
我們重寫list[this.data.index].x的值逗旁，并且將原有的list覆蓋，這樣我們在滑動的時候就能實時的看到元素跟隨手指移動的效果舆瘪；
這個時候我們可以發(fā)現(xiàn)片效，我們一直往左邊移動，wrap元素就會被推到屏幕的邊緣英古；這很明顯不是我們想要的效果淀衣，我們希望滑動到一定距離后就停止滑動，于是我們?yōu)槠涮砑幼詈笠粋€方法召调；
touchend: function (e) {
let list = this.data.list;
let move = this.data.Mstart - e.changedTouches[0].pageX;
list[this.data.index].x = move > 100 ? -180 : 0;
this.setData({
list: list
});
},
我們看到這個方法唯一的不同的地方是這一行
list[this.data.index].x = move > 100 ? -180 : 0
意思是當手指離開元素時膨桥，如果移動的距離大于100，那么元素將自動向左移動到180的距離唠叛，如果小于100那么元素將向右恢復(fù)只嚣。
接著我們給wrap元素添加style，這樣它就能獲得移動的距離x艺沼。
至于為什么要移動距離要除以2册舞，這個跟小程序使用rpx單位有關(guān)系；
之前我們寫100障般，-180是像素px调鲸，需要換算成rpx；
微信小程序開發(fā)尺寸單位文檔
設(shè)備 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
我們看到基本是2倍的比例剩拢；
<view class="wrap"
style="transform:translateX({{item.x/2}}px);"
data-index="{{index}}"
bindtouchstart='touchstart'
bindtouchmove='touchmove'
bindtouchend='touchend'
>{{item}}</view>
最后我們使用樣式為wrap元素添加過渡效果就基本完成了线得。
詳細案例請搜索微信小程序：52魔都
源碼地址：https://github.com/749264345/wechat-weapp-map
