微信小程式實現滑動刪除

<view class="bgwhite bor-bom-f2 row just-btw alignitems 
{{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{dataList}}" wx:key="index">
  <view class="item-left" data-index="{{index}}" 
  bindtouchstart="touchStart" bindtouchmove="touchMove">
    <view class="m-lr-30 row just-btw alignitems">
      <view>
        <view class="f28">{{item.name}}</view>
        <view class="row m-t-15">
          <view class="c999">張三</view>
          <view class="c999 m-l-50">17637930507</view>
        </view>
      </view>
      <image src="../../../images/phone_mid.png" mode="aspectFit" 
      style="width:43rpx;height:43rpx;"></image>
    </view>
  </view>
  <view class="delete">刪除</view>
</view>

// pages/user/suppliermana/suppliermana.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    // 設定開始的位置
    startX: 0,
    startY: 0,
    dataList:[],
  },

  /**
   * 生命週期函數--監聽頁面載入
   */
  onLoad: function (options) {
        for (var i = 0; i < 10; i++) {
         this.data.dataList.push({
             content: "供應商名稱" + i,
             isTouchMove: false //預設全隱藏刪除
         })
     }
     this.setData({
         dataList: this.data.dataList
     })
  },
  // 開始滑動
  touchStart(e) {
    console.log('touchStart=====>', e);
    let dataList = [...this.data.dataList]
    dataList.forEach(item => {
      // 讓原先滑動的塊隱藏
      if (item.isTouchMove) {
        item.isTouchMove = !item.isTouchMove;
      }
    });
    // 初始化開始位置
    this.setData({
      dataList: dataList,
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    })
  },
  // 滑動~
  touchMove(e) {
    console.log('touchMove=====>', e);
    let moveX = e.changedTouches[0].clientX;
    let moveY = e.changedTouches[0].clientY;
    let indexs = e.currentTarget.dataset.index;
    let dataList = [...this.data.dataList]
    // 拿到滑動的角度，判斷是否大於 30°，若大於，則不滑動
    let angle = this.angle({
      X: this.data.startX,
      Y: this.data.startY
    }, {
      X: moveX,
      Y: moveY
    });

    dataList.forEach((item, index) => {
      item.isTouchMove = false;
      // 如果滑動的角度大於30° 則直接return；
      if (angle > 30) {
        return
      }
    
    // 判斷是否是當前滑動的塊，然後對應修改 isTouchMove 的值，實現滑動效果
      if (indexs === index) {
        if (moveX > this.data.startX) { // 右滑
          item.isTouchMove = false;
        } else { // 左滑
          item.isTouchMove = true;
        }
      }
    })

    this.setData({
      dataList
    })
  },

  /**
   * 計算滑動角度
   * @param {Object} start 起點座標
   * @param {Object} end 終點座標
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回數位的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理常式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理常式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})

.item-left {
  width: 100%;
  margin-left: -140rpx;
  transform: translateX(140rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(140rpx);
}
.delete {
  height: 100%;
  width: 140rpx;
  background: #FF4128;
  color:#fff;
  text-align: center;
  padding:50rpx 0;
  transform: translateX(150rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(150rpx);
}
.touch-move-active .item-left,
.touch-move-active .delete {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}