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写布局,增加过渡效果,逻辑控制哪一条展开,展开项增加展开样式,滑动判断

相关推荐
说私域1 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
linda26182 小时前
本质上,Taro 是一个 跨平台编译框架
前端·taro
一渊之隔4 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun8 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54588 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui