【React+Ts】 实现无缝轮播

ts代码

import React, { Component,createRef } from 'react'
import './index.less'

export default class index extends Component {
   //滑动盒子
   slider = createRef<HTMLDivElement>()   
   getslider =()=> this.slider.current as HTMLDivElement;
   disx: number = 0;
   x: number = 0;
   startx: number = 0;
   endx: number = 0;
   iNow: number = 0;
   pageview: number = 0;
   setDrag(x: number) {
       return this.getslider().style.transform = `translatex(${x - this.pageview}px)`
   }
   componentDidMount() {
       this.pageview = document.documentElement.clientWidth;
       this.getslider().ontouchstart = this.fnStart.bind(this)
   }
   fnStart(ev: TouchEvent) {
       this.getslider().style.transition = 'none'
       this.startx = ev.changedTouches[0].pageX
       this.disx = this.startx - this.x;
       this.getslider().ontouchmove = this.fnMove.bind(this)
       this.getslider().ontouchend = this.fnEnd.bind(this)
       return false;
   }
   fnMove(ev: TouchEvent) {
       this.x = ev.changedTouches[0].pageX - this.disx;        
       this.setDrag(this.x)
   }
   fnEnd(ev: TouchEvent) {
       this.endx = ev.changedTouches[0].pageX;
       //如果 手指位置拖动的距离大于50 滑动到下一个页面或上一个页面 否则 返回当前页面
       if (Math.abs(this.startx - this.endx) >= 50) {
           //如果初始位置大于结束位置 就是向左滑动，否则向右滑动
           this.startx > this.endx ? this.leftDrag() : this.rightDrag();
       } else {
           this.getslider().style.transition = '.3s ease all';
           this.x = -this.iNow * this.pageview;
           this.getslider().ontransitionend = this.FnOver.bind(this)
           this.setDrag(this.x)
       }
       this.getslider().ontouchend = null;
       this.getslider().ontouchmove = null
   }
   leftDrag() {
       this.getslider().style.transition = '.3s ease all';
       this.iNow++ 
       //当前的页码 
       this.x = -this.iNow * this.pageview;     
       this.setDrag(this.x)
       //监听动画结束
       this.getslider().ontransitionend = this.FnOver.bind(this)
   }
   rightDrag() {
       this.getslider().style.transition = '.3s ease all';
       this.iNow--
       this.x = -this.iNow * this.pageview;
       this.setDrag(this.x)
       //监听动画结束
       this.getslider().ontransitionend = this.FnOver.bind(this)
   }
   FnOver() {
       if (this.iNow <= -1) {
           this.iNow = 4;
           this.getslider().style.transition = 'none';
           this.x = -this.iNow * this.pageview;
           this.setDrag(this.x);
       }
       if (this.iNow >= 5) {
           this.iNow = 0;
           this.getslider().style.transition = 'none';
           this.x = -this.iNow * this.pageview;
           this.setDrag(this.x);
       }
   }
   render() {
       return (
           <div className="swiper">
               <div className="swipers" ref={this.slider}>
                   <div className="swipers-item" >4</div>
                   <div className="swipers-item">0</div>
                   <div className="swipers-item">1</div>
                   <div className="swipers-item">2</div>
                   <div className="swipers-item">3</div>
                   <div className="swipers-item">4</div>
                   <div className="swipers-item" >0</div>
               </div>
           </div>
       );
   }
}

less代码

.swiper{
    width: 750px;
    height: 20vh;
    background-color: aqua;
    overflow: hidden;
    position: relative;
    .swipers{
        width: calc(750px*7);
        height: 20vh;
        display: flex;
        text-align: center;
        color: #fff;
        line-height: 20vh;
        font-size: 50px;
        transform: translate3d(-750px, 0px, 0px);
        :last-child{
            background-color: pink;
        }
        .swipers-item{
            width: 750px;
            height: 20vh;
        }
        .swipers-item:nth-child(1){
            background-color: aqua;
        }
        .swipers-item:nth-child(2){
            background-color: pink;
        }
        .swipers-item:nth-child(3){
            background-color: blue;
        }
        .swipers-item:nth-child(4){
            background-color: red;
        }
        .swipers-item:nth-child(5){
            background-color: orange;
        }
    }
}