微信小程序左滑删除功能开发案例详解

<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{ 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%;}

<view class="wrap" 
 data-index="{{index}}" 
 bindtouchstart='touchstart' 
 bindtouchmove='touchmove' 
 bindtouchend='touchend'
>{{item}}</view>

touchstart:function(e){
  this.setData({
   index: e.currentTarget.dataset.index,
   Mstart: e.changedTouches[0].pageX
  });
 }

 touchmove: function (e) {
  //列表项数组
  let list = this.data.list;
  //手指在屏幕上移动的距离
  //移动距离 = 触摸的位置 - 移动后的触摸位置
  let move = this.data.Mstart - e.changedTouches[0].pageX;
  // 这里就使用到我们之前记录的索引index
  //比如你滑动第一个列表项index就是0，第二个列表项就是1，···
  //通过index我们就可以很准确的获得当前触发的元素，当然我们需要在事前为数组list的每一项元素添加x属性
  list[this.data.index].x = move > 0 ? -move : 0;
  this.setData({
   list: list
  });
 }

 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
  });
 },

<view class="wrap" 
 style="transform:translateX({{item.x/2}}px);"
 data-index="{{index}}" 
 bindtouchstart='touchstart' 
 bindtouchmove='touchmove' 
 bindtouchend='touchend'
>{{item}}</view>