[JavaScript知识库]8、滑动删除组件_mobile端_react

1. jsx

/**
 * 滑动删除
 *
 * children   props 里面传递的盒子
 * onDelete   点击删除调用props方法
 * id         当前点击的唯一值
 */
import React from 'react';

import './index.less';

class SlideDelete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      isShow: false
    };
  }

  componentDidMount() {}

  handleTouchStart = (e) => {
    this.startX = e.touches[0].pageX;
    this.startY = e.touches[0].pageY;
  };

  handleTouchMove = (e) => {
    this.currentX = e.touches[0].pageX;
    this.moveX = this.currentX - this.startX;
    this.moveY = e.touches[0].pageY - this.startY;
    // 纵向移动时return
    if (Math.abs(this.moveY) > Math.abs(this.moveX)) {
      return;
    }
    // 滑动超过一定距离时，才触发
    if (Math.abs(this.moveX) < 10) {
      return;
    }
    const distance = this.moveX >= 0 ? 0 : -70;
    this.setState({
      moveStyle: {
        transform: `translateX(${distance}px)`
      },
      width: Math.abs(distance * 1),
      isShow: true
    });
  };

  render() {
    let { moveStyle, width, isShow } = this.state;
    let { id } = this.props;
    return (
      <React.Fragment>
        <div className="slide-item-wrap">
          <div
            className="slide-item-children"
            style={moveStyle}
            onTouchStart={this.handleTouchStart}
            onTouchMove={this.handleTouchMove}>
            {this.props.children}
          </div>
          <div
            className={`delete-btn ${
              width ? 'showBtn' : isShow ? 'hideBtn' : ''
            }`}
            style={{ width: width + 'px' }}
            onClick={(e) => {
              e.stopPropagation();
              this.props.onDelete(id);
            }}>
            删除
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default SlideDelete;

2. css文件

.slide-item-wrap {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  //   margin-bottom: 12px;

  .slide-item-children {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: transform 0.3s ease;
  }

  .delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: #fc5a45;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #ffffff;
    border-radius: 0 5px 5px 0;
    white-space: nowrap;
  }
  .showBtn {
    animation-name: showBtn;
    animation-duration: 0.5s;
  }
  .hideBtn {
    animation-name: hideBtn;
    animation-duration: 0.5s;
  }
  /* 动画代码 */
  @keyframes showBtn {
    from {
      width: 0px;
    }
    to {
      width: 70px;
    }
  }
  /* 动画代码 */
  @keyframes hideBtn {
    from {
      width: 70px;
    }
    to {
      width: 0px;
    }
  }
}