微信小程序列表左滑删除

微信小程序没有提供列表左滑删除的控件，项目中如果有这个需求，就需要自己去实现。我们可以通过touch事件来实现。

• bindtouchstart 手指触摸开始时，记录 startX 和 startY 开始坐标
• bindtouchmove 手指触摸滑动时，记录 touchMoveX 和 touchMoveY 滑动变化的坐标

我们还要计算滑动角度，只有当用户左滑的角度 < 30 度的时候，我们才会显示右侧的删除按钮。

实现代码

• Html

<view class="page-wrap">
  <scroll-view catchtouchmove="stopTouchMove" scroll-y="true" style="height:{{scrollBoxH + 'px'}}"  wx:if="{{pageCanShow}}">
    <view class="account-box {{item.isTouchMove ? 'touch-move-active' : ''}}" bindtouchstart="touchS" bindtouchmove="touchM" data-index="{{index}}" wx:for="{{dataList}}" wx:key="index">
      <view class="account-item" style="{{index == dataList.length-1 ? 'margin-bottom: 20rpx;' : ''}}" bindtap="accountListClicked" data-index="{{index}}">
        <view class="cell-title-box">
          <text>列表内容</text>
        </view>
      </view>
      <view class="del" catchtap="delAccountClicked" data-index='{{index}}'>删除</view>
    </view>
  </scroll-view>
</view>

• CSS

/* 左滑删除相关css */
.account-box {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
}

.touch-move-active .account-item, .touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.account-item {
  width: 100%;
  margin: 20rpx 0 0;
  padding: 0 30rpx;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(130rpx);
  transform: translateX(130rpx);
  margin-left: -130rpx;
  background-color: #ffffff;
}

.cell-title-box {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #f0f2f2;
}

.del {
  width: 130rpx;
  margin: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #f96160; 
  -webkit-transform: translateX(130rpx);
  transform: translateX(130rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

• JS

data: {
  dataList: [], // 数据列表
  startX: 0, // 开始坐标X轴
  startY: 0  // 开始坐标Y轴
},
// 禁用手动滑动切换
// 由于最外层是用 <scroll-view> 标签包裹的，所以 X 轴滑动时可能会有弹性，这里为了效果更好，可以使用该方法
stopTouchMove: function () {
  return false;
},
// 手指触摸开始
touchS: function(e) {
  //开始触摸时 重置所有删除
  this.data.dataList.forEach(function(v, i) {
    if (v.isTouchMove) //只操作为true的
      v.isTouchMove = false;
  })
  this.setData({
    startX: e.changedTouches[0].clientX,
    startY: e.changedTouches[0].clientY,
    dataList: this.data.dataList
  }) 
},
// 手指触摸滑动
touchM: function(e) {
  var index = e.currentTarget.dataset.index //当前索引
  var startX = this.data.startX //开始X坐标
  var startY = this.data.startY //开始Y坐标
  var touchMoveX = e.changedTouches[0].clientX //滑动变化坐标
  var touchMoveY = e.changedTouches[0].clientY //滑动变化坐标
  //获取滑动角度
  var angle = this.angle({
    X: startX,
    Y: startY
  }, {
    X: touchMoveX,
    Y: touchMoveY
  });
  this.data.dataList.forEach(function(v, i) {
    v.isTouchMove = false
    //滑动超过30度角 return
    if (Math.abs(angle) > 30) return;
    if (i == index) {
      if (touchMoveX > startX) { //右滑
        v.isTouchMove = false
      } else { //左滑
        v.isTouchMove = true
      }
    }
  })
  //更新数据
  this.setData({
    dataList: this.data.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);
},
//点击删除按钮事件
delAccountClicked: function(e) {
  var that = this;
  wx.showModal({
    content: '请确定要删除账户吗？',
    cancelColor: '#409eff',
    confirmColor: '#f96160',
    success(res) {
      if (res.confirm) {
        that.delAccount(e);
      }
    }
  })
},
//请求删除账户接口
delAccount: function(e) {
  let index = e.currentTarget.dataset.index;
  this.delItem(index)
},
//点击删除账户刷新页面
delItem: function(index) {
  var list = this.data.dataList
  list.splice(index, 1);
  this.setData({
    dataList: list
  });
}