h5 实现向左平滑，出现按钮操作，封装组件，模拟购物车左滑删除。react实现

需求

默认隐藏按钮，左滑显示按钮，react实现。

实现思路

用绝对定位把元素设为负值以隐藏元素，滑动的时候，用translate改变按钮的位置。

基础知识

1.触摸事件

touchstart事件：事件对象event，包含手指触摸的位置
touchmove事件：事件对象event，包含手指滑动的位置
touchend事件：事件对象event，包含手指离开屏幕的位置
click事件：点击事件，和触摸事件冲突

2. 触摸事件和点击事件的，先后触发顺序

在屏幕上点击，先后触发事件

图层 2.png

在屏幕上滑动，先后触发事件

图层 3.png

注：从上图中我们可以看出，click时间是在touchstart之后触发的。滑动手势是不会触发click事件的

react实现

样式部分：

.role_li {
  overflow: hidden;
  @extend %flex;
  justify-content: space-between;
  align-items: center;
  height: 150px;
  padding-left: 42px;
  padding-right: 36px;
  position: relative;
  .left {
    width: 100%;
  }
  .role_name {
    color: #000000;
    font-weight: 600;
    font-size: 28px;
  }
  .server_name {
    color: #b6b6b6;
    font-size: 24px;
  }
  .right {
    @extend %flex-center;
    position: absolute;
    top: 0;
    height: 100%;
    width: 150px;
    right: 0;
  }
}

state = {
          moveDistance: 0,
          move: 0,
          startX: 0,
          distance: 70,
        };
        handleTouchstart = (e) => {
          console.log("滑动开始了");
          console.log(e.targetTouches[0].clientX);
          this.setState({
            moveDistance: 0,
            move: 0,
            startX: e.targetTouches[0].clientX,
          });
        };
        handleTouchMove = (e) => {
          console.log(e.targetTouches[0].clientX);
          console.log("滑动了");
          this.state.move = this.state.startX - e.targetTouches[0].clientX;
          if (this.state.move > 0) {
            // e.preventDefault();
            this.state.moveDistance = Math.pow(this.state.move, 0.8);
            this.setState({
              moveDistance: this.state.move,
            });
          }
        };
        handleTouchEnd = (e) => {
          console.log("滑动结束了");
          if (this.state.moveDistance > this.state.distance / 2) {
            this.setState({
              moveDistance: this.state.distance,
            });
          } else {
            this.setState({
              moveDistance: 0,
            });
          }
        };

                

                  

                    
澈澈澈澈澈儿
                    
iOS-QQ2服-万水依山