wx小程序实现左滑删除

实现

一、wxml布局
这里我是先用了一个大盒子包裹小盒子，然后小盒子里面进行左右布局（左边为内容部分，右边为删除按钮）的方式实现的

<view class="cart">
      <view >
        <!-- 通过 isTouchMove 的值来对应移动位置-->
        <view class="item {{item.isTouchMove ? 'touch-move-active' : ''}}" wx:key="item" wx:for="{{dataList}}">
          <view class="item-left"  data-index="{{index}}" bindtouchstart="touchStart" bindtouchmove="touchMove">
            
            <view class="content" >
              <view class="conll"  >
                <view class="icon">
                  <image class="iconImg" src="{{item.minLogo}}"></image>
                  <view>
                    <view class="con-t">{{item.agencyName}}</view>
                    <view class="con-time">{{item.makeTime}}</view>
                  </view>
                </view>
                <view class="pushRecord" bindtap="goPushrecord" data-index="{{item.agencyId}}">推送记录</view>
              </view>
             
            </view>
           
          </view>
          <view class="delete"  bindtap='delItem'  data-index="{{index}}" >移除</view>
        </view>
      </view>
    </view>

二、wxss的写法
wxss是用了flex布局，然后让左边的内容部分的宽度占100%，左外边距为删除按钮的宽度，右边设置固定宽度，通过动画的方式将右边的删除按钮往右偏移删除按钮的宽度，使之看不到，最后通过 动态设置 .touch-move-active 实现滑动效果。
在ios会有横滚！
解决：最外层盒子css加overflow-x:hidden；

.cart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x:hidden;//解决ios真机会出现横滚
}

.item {
 
  /* margin-bottom: 15rpx; */
  background-color: #fff;
  border-bottom: 1rpx solid #DDDDDD;
  /* padding: 20rpx 10rpx; */
  /* padding-right: 0; */
  display: flex;
  box-sizing: border-box;
  height: 140rpx;

}

/* 除删除按钮之外的其他部分 */
.item-left {
  display: flex;
  justify-content: start;
  align-items: center;

  /* 关键代码 start */
  width: 100%;
  /* width: 375px; */
  margin-left: -130rpx;
  transform: translateX(130rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(130rpx);
  /* 关键代码 end */
}



/* 删除按钮 */
.delete {
  height: 100%;
  /* width: 140rpx;
  background-color: rgb(241, 81, 81);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  color: #fff; */
  width: 130rpx;
  height: 140rpx;
  background: #E75E58;
  font-size: 30rpx;
  font-family: 'PingFang SC';
  font-weight: 500;
  color: #FFFFFF;
  /* position: absolute;
  top: 0; */
  /* right: -130rpx; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 关键代码 start */
  transform: translateX(150rpx);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(150rpx);
  /* 关键代码 end */
}

/* 关键代码 start --> 向左滑动 */
.touch-move-active .item-left,
.touch-move-active .delete {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/* 关键代码 end */

三、js
通过小程序自带的touchStart和touchMove实现的

//设置变量
 data: {
    dataList: [{
      agencyName: "标题1222",
      isTouchMove: false,
      makeTime: "2021-03-12 13:39:12",
      minLogo: "wKgBtF7q4aGAGre8AAADgS03NVg960.png",
      updateTime: "2021-03-16 10:39:12"},
      {
        agencyName: "标题2222",
        isTouchMove: false,
        makeTime: "2021-03-12 13:39:12",
        minLogo: "wKgBtF7q4aGAGre8AAADgS03NVg960.png",
        updateTime: "2021-03-16 10:39:12"}],
    // 设置开始的位置
    startX: 0,
    startY: 0,
  },
// 开始滑动
  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]

    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
      }

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