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

只需用手指滑动列表，右侧就会出现删除；例如，像这样：

向左滑动后，会出现以下结果：

开始删除代码 ~ 假设我们数组列表中有 N 个元素。首先定义主要结构

<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%;}
复制代码

好了，这些就是我们需要的基本方法了。为了填充封面以擦除 100%，我们给它 100% 的宽度和高度，并用基色填充它。至于如何美化它，可以添加必要的方法。 。基本结构就在这里。接下来，我们添加封面事件；

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

绑定三个触摸事件，触摸开始、触摸事件和触摸结束。同时，还有一个包装器添加了 data-index="{{index}}" ，以便我们可以确定当前正在触摸哪个列表。然后我们将为他们添加一个合适的方法。

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

touch方法中，将当前触发动作元素的索引存储为index，并获取当前手指触摸的坐标位置 e.changedTouches[0].pageX；

e.changedTouches[0].pageX

Screen 左上角坐标为(0,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
    });
  }
复制代码

当触摸位置小于第一个点时，说明手指向左移动，因为X页面越小，距离越近到屏幕边框；现在，移动是包裹容器应向左移动多远。我们重写list[this.data.index].x的值，写入原来的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
    });
  },
复制代码

Us 您在此方法中看到的唯一区别是这一行

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

表示当手指离开元素时，如果移动距离超过100，元素会自动向左移动180的距离。如果小于100，则该元素将被返回到右侧。然后给包装元素添加一个方法，使其能够获取要移动的距离x。至于为什么移动距离要除以2，和小程序使用的rpx单位有关；之前我们写的是100，-180是像素px，需要转换为rpx；微信小程序开发文档大小

设备 rpx 换算为 px（屏幕宽度/750） px 换算为 rpx（750/屏幕宽度） iPhone5,1rpx = 0.42px,1px = 2.34 rpx 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>
复制代码

最后我们使用一种方法给包裹的元素添加过渡效果就完成了。

作者：易哉掘金
链接：https://juejin.im/post/5be81e1251882516f578628a
来源：掘金商业印刷请联系作者授权。非商业转载请注明来源。