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; // 展开
}

思路:

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

相关推荐
じòぴé南冸じょうげん5 小时前
小程序的project.private.config.json是无依赖文件,那可以删除吗?
前端·小程序·json
2501_916013746 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918418 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张9 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
微三云-轩9 小时前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
阿隆_趣编程11 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
2501_915918411 天前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾1 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字1 天前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台