taro/vue 左滑删除购物车

环境：taro/vue 开发的小程序

效果图

 结构

 布局思路：利用margin-right:-125rpx;讲删除按钮隐藏，触发条件以后，改变margin-right，margin-left状态，讲删除按钮展示，选择按钮隐藏

　　css

.shop_item_view{
  background: #fff;
  margin: 25rpx 28rpx;
   .shop_item {
    overflow: hidden;
    .shop_name {
      display: flex;
      flex-direction: row;
      color: #14151a;
      font-size: 28rpx;
      padding: 38rpx 30rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      image {
        width: 20rpx;
        height: 20rpx;
      }
    }
    .good_item {
      padding: 0 30rpx;
      margin-bottom: 48rpx;
      position: relative;
      padding-right: 145rpx;
      margin-left: 0;
       margin-right: -115rpx;
       transition: all .3s;
     
     &.is_delete{
 margin-right: 0;
 margin-left: -85rpx;
 .no_buy{
       margin-right: 26rpx;
 }
     }
      .left_item{
         display: flex;
        flex-direction: row;
        align-items: center;
  
        .good_l {
            display: flex;
            flex-direction: row;
            align-items: center;
            image {
              width: 184rpx;
              height: 184rpx;
            }
        }
        .good_r {
          width: 360rpx;
          margin-left: 25rpx;
          .good_name {
            width: 360rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          
            font-size: 28rpx;
            color: #14151a;
          }
          .no_buy_good_name{
            color: #999999;
          }
          .tag {
            margin: 32rpx 0 28rpx;
            .tag_item {
              background: #f4f4f4;
              padding: 2rpx 15rpx;
              color: #666666;
              font-size: 24rpx;
              border-radius: 4rpx;
            }
          }
          .btm_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            .price {
              color: #f64747;
              font-size: 32rpx;
            }
            .number_box {
              font-size: 30rpx;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              input {
                font-size: 28rpx;
                width: 76rpx;
                text-align: center;
                background: #f4f4f4;
                margin: 0 20rpx;
              }
            }
          }
        }
      }
      .right_item{
        background: #F64747;
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        font-size: 28rpx;
        width: 115rpx;
        height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      }
    }
  }
}      

　　

data

data() {
    return {
        startX: 0, //开始触摸的位置
        endX: 0, //结束触摸的位置
        disX: 0, //移动距离
        lastX: 0, //上一次X坐标 
    };
  },      

View Code

实现思路：

获取第一次触发的x坐标

获取结束移动的x坐标

两个x坐标相减，正数，向右边滑动

                           负数，向左边滑动

监听左滑右滑

// 监听左滑右滑
      touchStart: function (ev) {
        ev = ev || event;
        // console.log(ev.targetTouches);
        // console.log(ev.changedTouches);
        if (ev.touches.length == 1) { //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
          this.startX = this.lastX = ev.touches[0].clientX; // 记录开始位置
        }
      },
      touchMove: function (ev) {
        ev = ev || event;
        // ev.touches.length == 1  触摸移动，当且仅当屏幕只有一个触摸点
        if (ev.touches.length == 1) {
         
          // 记录一次坐标值
          this.lastX = ev.touches[0].clientX;
          
        }
      },
      touchEnd: function (ev,cartItem) {
        ev = ev || event;
        // ev.changedTouches.length == 1
        // 1.一个手指触摸
        // 一个手指先触摸，另一个手指触摸，一个一个触摸，不是同时触摸
        if (ev.changedTouches.length == 1) {
          let endX = ev.changedTouches[0].clientX;
          this.disX = endX - this.startX;
          // 只有滑动大于一半距离才触发
          if (Math.abs(this.disX) > 100) {
            if (this.disX < 0) {
              console.log('左滑');
             
              cartItem.isDelete=true;
            } else {
              console.log('右滑');
           
               cartItem.isDelete=false;
            }
          }
        }
      },