效果圖如下坡锡，有點(diǎn)丑，但是憋著

![JF0`LQKGIJQU93FI]M}R{}2.png](https://upload-images.jianshu.io/upload_images/9374643-fdfdd6d8c6b6522b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

要實(shí)現(xiàn)的效果：
1鹉勒，當(dāng)向左滑動(dòng)時(shí)，item跟隨手指像左移動(dòng)禽额，同時(shí)右側(cè)出現(xiàn)可刪除的按鈕
2锯厢，當(dāng)滑動(dòng)距離大于按鈕寬度一半松開手指時(shí)脯倒，item自動(dòng)滑動(dòng)到左側(cè)顯示出按鈕，小于一半時(shí)item自動(dòng)回到原來的位置藻丢，隱藏按鈕。

原理

1.首先一個(gè)item分文上下兩層悠反，最上面一層是要展示的一層，下面一層是你進(jìn)行操作的一層
2.通過position定位斋否，來操作最上面一層的left,從而達(dá)到一個(gè)左滑的效果

代碼

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