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

直接进入正题，咱们须要作的就是经过手指滑动列表项后，右侧出现删除； 好比说像这样：

向左边滑动后出现以下的效果：

开始撸代码～ 假设咱们有N个列表项来自一个数组list，先肯定基本的结构

<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做为显示项目内容的容器，与delete删除按钮的容器。 当咱们手指向左滑动wrap时，wrap容器向左移动；此时delete从wrap容器以后显示出来；换句话说咱们喜欢wrap容器盖住delete，使wrap默认在delete上方。 没错，咱们用样式来实现效果。

.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，咱们给到它宽高都是百分之百，而且填充背景颜色是必然的，至于要怎么美化可自行添加须要的样式。 基本的结构就到这里了，接下来咱们为wrap添加触摸事件；

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

咱们绑定了三个触摸事件，分别是，触摸开始，触摸时移动以及触摸结束。 同时有个wrap添加了data-index="{{index}}" 这样咱们就能够肯定当前触摸的列表项是哪个。 接着咱们来为他们添加对应的方法。

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

经过touchstart方法咱们将当前触发事件元素的索引保存到index，而且得到当前手指触摸的坐标位置e.changedTouches[0].pageX；

e.changedTouches[0].pageX

屏幕的左上角的坐标为(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
    });
  }
复制代码

当移动后的触摸位置小于最初触发的位置时，说明手指是向左滑动，由于pageX越小就越向屏幕边缘靠近；这个时候move就是wrap容器须要向左移动的距离。 咱们重写list[this.data.index].x的值，而且将原有的list覆盖，这样咱们在滑动的时候就能实时的看到元素跟随手指移动的效果； 这个时候咱们能够发现，咱们一直往左边移动，wrap元素就会被推到屏幕的边缘；这很明显不是咱们想要的效果，咱们但愿滑动到必定距离后就中止滑动，因而咱们为其添加最后一个方法；

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那么元素将向右恢复。 接着咱们给wrap元素添加style，这样它就能得到移动的距离x。 至于为何要移动距离要除以2，这个跟小程序使用rpx单位有关系； 以前咱们写100，-180是像素px，须要换算成rpx； 微信小程序开发尺寸单位文档

设备 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魔都

源码地址：github.com/749264345/w…