taro 微信小程序写滑动删除左滑

       {list.map((item, index) => {
              return (
                 touchmove(e, index)}
                  onTouchEnd={touchE}
                >
                  
                    {/*  handleDel(item)} className={styles.del}> */}
                    
                    
                      图书名称：
                      {item.name}
                    
                    
                      提交时间：{item.createTime}
                    
                    
                      系统反馈：{item.feedback}
                    
                    {item.ifPurchase == 1 && item.isbn && (
                       handleGoDetail(item.isbn)}>
                        去借阅
                      
                    )}
                  
                   handleDel(item)}>
                
              );
            })}





  const touchE = e => {
    // console.log(e);
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离
      var disX = startX - endX;
      console.log(disX, 1111);
      //获取手指触摸的是哪一项
    }
  };
  //手指触摸动作开始 记录起点X坐标
  const touchstart = e => {
    setStartX(e.changedTouches[0].clientX);
    setStartY(e.changedTouches[0].clientY);
  };
  //滑动事件处理
  const touchmove = (e, index) => {
    let touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY; //滑动变化坐标
    //获取滑动角度
    const angleResult: any = angle(
      {
        X: startX,
        Y: startY
      },
      {
        X: touchMoveX,
        Y: touchMoveY
      }
    );
    //滑动超过30度角 return
    if (Math.abs(angleResult) > 30) return;
    if (touchMoveX > startX) {
      //右滑
      console.log('右滑', index);
      let newlist = list.map((j, i) => {
        return {
          ...j,
          isOpened: false
        };
      });
      setList(newlist);
    } else {
      //左滑
      console.log('左滑', index);
      let newlist = list.map((j, i) => {
        if (i == index) {
          return {
            ...j,
            isOpened: true
          };
        }
        return {
          ...j,
          isOpened: false
        };
      });
      setList(newlist);
    }
  };
  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  const angle = (start, end) => {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y;
    //返回角度 /Math.atan()返回数字的反正切值
    return (360 * Math.atan(_Y / _X)) / (2 * Math.PI);
  };

.list {
  .item {
    padding: 20px 15px;
    margin: 0 15px;
    background-color: #fff;
    border-radius: 8px;
    position: relative;
    margin-bottom: 15px;
    .title {
      font-weight: bold;
      font-size: 15px;
      color: #989898;
      display: flex;
      .name {
        width: 75px;
      }
      .title_value {
        flex: 1;
        color: #333333;
        margin-right: 45px;
      }
    }
    ._item {
      margin-top: 10px;
      font-size: 14px;
      color: #989898;
    }
    ._btn {
      width: 70px;
      height: 30px;
      background-color: #fdd000;
      border-radius: 16px;
      font-size: 14px;
      color: #333333;
      position: absolute;
      right: 15px;
      bottom: 14px;
      text-align: center;
      line-height: 30px;
    }
  }
}
.lable_xinyuan {
  width: 24px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 10px;
}
.del {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.list {
  overflow: hidden;
}
.pos {
  position: relative;
  left: -0px;
  transition: all 0.2s;
  .del_r {
    position: absolute;
    width: 40px;
    height: 40px;
    // margin-right: 15px;
    background: url('../../../static/1.4.4/[email protected]') no-repeat;
    background-size: 100% 100%;
    right: -43px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .item {
    position: relative;
  }
}
.isOpened {
  left: -63px; // 展开
}

思路：

css写布局，增加过渡效果，逻辑控制哪一条展开，展开项增加展开样式，滑动判断