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

相关推荐
腾马科技2 小时前
新版saas餐饮外卖小程序源码/微信/支付宝/抖音/扫码点餐/DIY装修/美团代付/全开源
微信小程序·小程序·点餐小程序
郑叔敲代码7 小时前
帝国cms 微信小程序的登录逻辑
微信小程序·小程序·notepad++
棋子一名10 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风11 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者812 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088912 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌13 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好26713 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_9151063214 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆14 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序