微信小程序实现左滑删除

效果图如下，有点丑，但是憋着

![JF0`LQKGIJQU93FI]M}R{}2.png](https://img.haomeiwen.com/i9374643/fdfdd6d8c6b6522b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

要实现的效果：
1，当向左滑动时，item跟随手指像左移动，同时右侧出现可删除的按钮
2，当滑动距离大于按钮宽度一半松开手指时，item自动滑动到左侧显示出按钮，小于一半时item自动回到原来的位置，隐藏按钮。

原理

1.首先一个item分文上下两层，最上面一层是要展示的一层，下面一层是你进行操作的一层
2.通过position定位，来操作最上面一层的left,从而达到一个左滑的效果

代码

1.wxml

<view class="item-box">
  <view class="item-list">
    <view class="item-detail" wx:for="{{collectionList}}">
      <view class="left" style="{{item.style}}" bindtouchstart="startMove" data-index="{{index}}" bindtouchmove="touchMove" bindtouchend="touchEnd">
        {{item.title}}
      </view>
      <view class="right">
        <view class="delect"  data-index="{{index}}" bindtap = "delectCollection">
          删除
        </view>
      </view>
    </view>
  </view>
</view>

2.wxss

.item-detail {
    width: 100%;
    position: relative;
    height: 230rpx;
    margin-bottom: 40rpx;
}

.left {
    width: 100%;
    height: 230rpx;
    background: red;
    position: absolute;
    z-index: 100;
}

.right {
    width: 100%;
    height: 230rpx;
    background: pink;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
}

.delect {
    width: 188rpx;
    background: yellow;
    line-height: 230rpx;
    float: right;
}

3.js

let clientX = 0;

Page({
  data: {
    collectionList: [{
      title: '133'
    },
    {
      title: '456'
    }],
   clientX: 0,
  clientY: 0,
  isScrollerY: true,
  index: 0,
  onLoad: function () {
  },

  startMove(e) {
    this.index = e.currentTarget.dataset.index;
    this.data.collectionList.forEach(element => {
      element.style = this.resetStyle()
    });
    this.setData({
      collectionList: this.data.collectionList
    })
    if (e.touches.length > 0) {
      this.clientX = e.touches[0].clientX;
      this.clientY = e.touches[0].clientY;
    }
  },

  touchMove(e) {
    if (e.touches.length > 0) {
      let moveX = e.touches[0].clientX;
      let moveY = e.touches[0].clientY;
      let moveDistanceX = this.clientX - moveX;
      let moveDistanceY = this.clientY - moveY;
      if (moveDistanceY < 10) {
        if (moveDistanceX > this.data.maxMoveDistance) {
          moveDistanceX = this.data.maxMoveDistance;
        }
        let index = e.target.dataset.index;
        this.data.collectionList[index].style = this.delectMoveStyle(moveDistanceX, false)
        this.setData({
          collectionList: this.data.collectionList
        });
      }
    } else {
      this.isScrollerY = false;
    }

  },

  touchEnd(e) {
    if (this.isScrollerY) {
      if (e.changedTouches.length > 0) {
        let lastDistance = e.changedTouches[0].clientX;
        let moveDistance = -(lastDistance - this.clientX);
        if (moveDistance > this.data.maxMoveDistance) {
          moveDistance = this.data.maxMoveDistance;
        }
        console.log(moveDistance)
        let style = this.delectMoveStyle(moveDistance, true);
        let index = e.target.dataset.index;
        this.data.collectionList[index].style = style;
        this.setData({
          collectionList: this.data.collectionList
        });
      }
    }

  },

  delectMoveStyle(moveDistance, isEnd) {
    console.log('isEnd', isEnd);
    let style = '';
    if (!isEnd) {
      style = 'left: -' + moveDistance + 'px';
    } else {
      if (moveDistance <= this.data.maxMoveDistance && moveDistance > this.data.minMoveDistance) {
        style = 'transform:translateX(-' + this.data.maxMoveDistance + 'px);left:0 ';
      } else {
        style = this.resetStyle();
      }
    }
    return style;
  },

  resetStyle() {
    let style = 'transform:translateX(0);transition: transform 0.8s;';
    return style
  },

  delectCollection(e) {
    console.log('index', e);
    let index = e.target.dataset.index;
    this.data.collectionList.splice(index, 1);
    this.setData({
      collectionList: this.data.collectionList
    })
  }
})