taro 微信小程序写滑动删除左滑-Toy模板网

这篇具有很好参考价值的文章主要介绍了taro 微信小程序写滑动删除左滑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

       {list.map((item, index) => {
              return (
                <View
                  className={`${styles.pos} ${item.isOpened ? styles.isOpened : ''}`}
                  onTouchStart={touchstart}
                  onTouchMove={e => touchmove(e, index)}
                  onTouchEnd={touchE}
                >
                  <View className={styles.item}>
                    {/* <Image src={del} onClick={() => handleDel(item)} className={styles.del}></Image> */}
                    <Image src={lable_xinyuan} className={styles.lable_xinyuan}></Image>
                    <View className={styles.title}>
                      <View className={styles.name}>图书名称：</View>
                      <Text className={styles.title_value}>{item.name}</Text>
                    </View>
                    <View className={styles._item}>
                      <Text>提交时间：{item.createTime}</Text>
                    </View>
                    <View className={styles._item}>
                      <Text>系统反馈：{item.feedback}</Text>
                    </View>
                    {item.ifPurchase == 1 && item.isbn && (
                      <View className={styles._btn} onClick={() => handleGoDetail(item.isbn)}>
                        去借阅
                      </View>
                    )}
                  </View>
                  <View className={styles.del_r} onClick={() => handleDel(item)}></View>
                </View>
              );
            })}





  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/del_icon@2x.png') no-repeat;
    background-size: 100% 100%;
    right: -43px;
    top: 50%;
    transform: translate(0, -50%);
  }
  .item {
    position: relative;
  }
}
.isOpened {
  left: -63px; // 展开
}

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