react原生下拉刷新demo

 <style>
        body{
            margin: 0;
            padding: 0;
        }
        .slider {
            height: 30px;
            width: 300px;
            background: #999;
            position: relative;
            margin: auto;
            margin: 100px;
        }


        .box {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: red;
            position: absolute;
        }


        .box.as {
            background: blue;
            right: 0;
        }


        /*  线条 */
        .line {
            width: 300px;
            height: 5px;
            background: #eee;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
        }


        .line.ac {
            background: rgb(247, 151, 25);
        }
    </style>

CSS代码部分

const root = document.querySelector('#root')
    class Comp extends React.Component {
        constructor(...args) {
            super(...args)
        }
        fnStart(ev) {
      ev.target.style.top = 0;
      this.scroolTop =
        ev.changedTouches[0].pageY - ev.target.offsetTop;
        
      document.ontouchmove = this.fnmove.bind(this);
      document.ontouchend = this.fnEnd;
      ev.preventDefault && ev.preventDefault();
    }
    fnmove(ev) {
      this.T = ev.changedTouches[0].pageY - this.scroolTop;
      console.log(ev.changedTouches[0].pageY,11111)
      console.log(this.T)
    
      if (this.scale > 0.12) {
        this.scale = 1 - this.T / 200;
        
      } else {
        console.log(this.scale)
        this.scale = 0.12;
      }
      ev.target.style.top = this.T * this.scale + "px";
    }
    fnEnd(ev) {
      document.ontouchmove = null;
      document.ontouchend = null;
      setTimeout(() => {
        ev.target.style.top = 0;
        ev.target.style.transition = ".3s ease all";


        ev.target.addEventListener("transitionend", () => {
          console.log(1111);
          ev.target.style.transition = null;
        });
      }, 3000);
    }
    render(){
        return (<div className="car-box">
     <div className="car">正在加载中...</div>
     <div className="box" onTouchStart={this.fnStart.bind(this)}>
        <div className="con-txt">上拉刷新</div>
    </div>
  </div>)
    }
}
ReactDOM.render(<Comp/>,root)

js的原生代码