本文共 3223 字，大约阅读时间需要 10 分钟。

��������������� - ���������������������������

������������������������������������������������������������������������������������������������������������������������������������������������������������

������������������

������������������������������������������������������������view���������������flex���������������������������������������������������������������������������������������������������������������

   
  
    
    
     
      
      
        
       
      
      
      
      
       
        ������
      
      
    
     
  
    
   

������������������

���WXSS���������������������������

.cart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.item {
  margin-bottom: 15rpx;
  background-color: #fff;
  padding: 20rpx 10rpx;
  padding-right: 0;
  display: flex;
  box-sizing: border-box;
  height: 220rpx;
}
.item-left {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  margin-left: -140rpx;
  transform: translateX(140rpx);
  transition: all 0.4s;
}
.delete {
  width: 140rpx;
  background-color: #ffcccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  color: #fff;
  transform: translateX(150rpx);
  transition: all 0.4s;
}

������������������

���������������������������������������������������������������������������������������

.touch-move-active .item-left,
.touch-move-active .delete {
  transform: translateX(0);
}

������������������

���JavaScript���������������������������

const pages = {
  cart: {
    data: {
      startX: 0,
      startY: 0,
      dataList: [
        {
          id: 1,
          title: "��������������������������� Air 2",
          price: 278,
          num: 1
        },
        // ���������������
      ]
    },
    touchStart(e) {
      this.data.startX = e.touches[0].clientX;
      this.data.startY = e.touches[0].clientY;
      this.data.dataList.forEach(item => item.isTouchMove = true);
      this.setData({
        dataList: this.data.dataList,
        startX: this.data.startX,
        startY: this.data.startY
      });
    },
    touchMove(e) {
      const moveX = e.changedTouches[0].clientX;
      const moveY = e.changedTouches[0].clientY;
      const angle = this.angle({
        X: this.data.startX,
        Y: this.data.startY
      }, {
        X: moveX,
        Y: moveY
      });
      this.data.dataList.forEach((item, index) => {
        if (Math.abs(moveX - this.data.startX) > 150) return;
        if (angle > 30) return;
        if (moveX > this.data.startX) {
          item.isTouchMove = false;
        } else {
          item.isTouchMove = true;
        }
      });
      this.setData({
        dataList: this.data.dataList
      });
    },
    delItem(e) {
      const id = e.currentTarget.dataset.id;
      this.data.dataList = this.data.dataList.filter(item => item.id !== id);
      this.setData({
        dataList: this.data.dataList
      });
    },
    angle(start, end) {
      const deltaX = end.X - start.X;
      const deltaY = end.Y - start.Y;
      return 360 * Math.atan(deltaY / deltaX) / (2 * Math.PI);
    }
  }
};

������������������������������������������������������������������������������������������������������������������������������������������