React 类组件 + Ts 简易无缝轮播图

index.tsx文件

import React, { Component, createRef } from 'react';
import './index.less'
class index extends Component {
    box = createRef<HTMLDivElement>()
    getbox = () => this.box.current as HTMLDivElement;
    disx: number = 0
    x: number = 0
    index: number = 0
    list = [4, 1, 2, 3, 4, 1]
    fnStart(ev: React.TouchEvent) {   
        this.getbox().style.transition = 'null';
        if (this.index === 5) this.index = 1;
        if (this.index === 0) this.index = 4;
        this.disx = ev.changedTouches[0].pageX;
        this.getbox().ontouchmove = this.fnMove.bind(this)
        this.getbox().ontouchend = this.fnEnd.bind(this)
    }
    fnMove(ev: TouchEvent) {
        this.x = ev.changedTouches[0].pageX - this.disx;
        this.getbox().style.left = this.index * -100 + this.x / 10 + 'vw'

    }
    fnEnd() {
        this.getbox().style.transition = '.3s all';

        if (this.x < -150) this.index++
        if (this.x > 150) this.index--
        this.x = 0
        this.getbox().style.left = this.index * -100 + 'vw'
    }

    render() {
        return (
            <div className='slider'>
                <div className="slider-box">
                    <div className="list-item" ref={this.box}>
                        {
                            this.list.map((item, index) => <div key={index}
                                onTouchStart={this.fnStart.bind(this)}
                            >{item}</div>)
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default index;

index.less

.slider {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
        .slider-box {
            display: flex;
            position: absolute;
            overflow: hidden;
            height: 81%;
            width: 100vw;      
            .list-item {
                transition: 0.3s all;
                display: flex;
                position: absolute;
                left: 0vw;
                height: 81%;

                >div:nth-child(2n-1) {
                    background-color: rgb(216, 56, 56);
                }
                >div:nth-child(2n) {
                    background-color: rgb(31, 140, 186);
                }
                div {
                    text-align: center;
                    font-size: 50px;
                    line-height: 80px;
                    width: 100vw;
                    height: 40%;
                }
            }
        }
    
    }