React加ts左右切换轮播

结构

     <div className='swiper'>
            <button className='button1' onClick={doclicks}>后退</button>
            <div className='swiper-box' ref={Box}>
                <div className='swiper-items'>1</div>
                <div className='swiper-items'>2</div>
                <div className='swiper-items'>3</div>
                <div className='swiper-items'>4</div>
            </div>
            <button className='button2' onClick={doclick}>前进</button>
        </div>

样式

.swiper {
    width: 750px;
    height: 20vh;
    background-color: pink;
    overflow: hidden;
    position: relative;

    .button1 {
        position: absolute;
        z-index: 1;
        width: 60px;
        height: 150px;
        background-color: rgba(0, 0, 0, 1);
        border: none;
        color: white;
        top: 55px;
    }

    .button2 {
        z-index: 1;
        position: absolute;
        right: 0;
        top: 55px;
        width: 60px;
        height: 150px;
        background-color: rgba(0, 0, 0, 1);
        border: none;
        color: white;
    }

    .swiper-box {
        display: flex;
        width: 400%;
        height: 20vh;

        .swiper-items:nth-child(1) {
            width: 750px;
            height: 20vh;
            font-size: 50px;
            text-align: center;
            background-color: rgb(189, 122, 20);
            line-height: 20vh;
        }

        .swiper-items:nth-child(2) {
            width: 750px;
            height: 20vh;
            font-size: 50px;
            text-align: center;
            background-color: rgb(144, 114, 226);
            line-height: 20vh;
        }

        .swiper-items:nth-child(3) {
            width: 750px;
            height: 20vh;
            font-size: 50px;
            text-align: center;
            background-color: rgb(230, 84, 183);
            line-height: 20vh;
        }

        .swiper-items:nth-child(4) {
            width: 750px;
            height: 20vh;
            font-size: 50px;
            text-align: center;
            background-color: aqua;
            line-height: 20vh;
        }
    }
}

ts部分

import { useRef, useEffect } from 'react'
import './index.less'

export default function Swiper() {
    let dix: number = 0
    let x: number = 0
    let page: number = 0
    // 按下时X值
    let startx: number = 0
    // 鼠标抬起时的x值
    let endx: number = 0
    // 可视宽
    let pagewidth: number = 0
    // ref获取
    const Box = useRef<HTMLDivElement | null>(null)
    // 保存一份指向
    const Get = () => {
        return Box.current as HTMLDivElement
    }
    // 页面加载调用
    useEffect(() => {
        // 绑定鼠标按下事件
        Get().ontouchstart = fnStart
        // 获取可视区宽度
        pagewidth = document.documentElement.clientWidth
    })
    // 按下
    const fnStart = (e: TouchEvent) => {
        // 按下时的pagex值
        startx = e.changedTouches[0].pageX
        dix = startx - x
        document.ontouchmove = fnMove
        document.ontouchend = fnEnd
        // return false
    }
    // 移动
    const fnMove = (e: TouchEvent) => {
        // 移动时的pageX值
        x = e.changedTouches[0].pageX - dix
        // 让盒子可以拖动
        Get().style.transform = `translate3d(${x}px,0px,0px)`
    }
    // 分装
    const getbox = (x: number) => {
        Get().style.transform = `translate3d(${x}px,0px,0px)`
        // 过度
        Get().style.transition = ".5s all"
    }
    // 抬起
    const fnEnd = (e: TouchEvent) => {
        // 保存一份鼠标抬起时的值
        endx = e.changedTouches[0].pageX
        // 判断拖动的值 这个值是一个绝对值 >=50的时候执行 
        if (Math.abs(endx - startx) >= 50) {
            // 判断抬起时的x小于按下的x 也就是判断盒子向左移动
            if (endx < startx) {
                page++
                // 判断page大于等于3,如果是就让page的值为3
                (page >= 3) && (page = 3)
                x = -page * pagewidth
                getbox(x)
            } else {   // 否则向右移动
                page--
                // 判断page小于等于0,如果是就让page的值为0
                (page <= 0) && (page = 0)
                x = -page * pagewidth
                getbox(x)
            }
        } else {
            x = -page * pagewidth
            getbox(x)
        }

        document.ontouchmove = null
        document.ontouchend = null
    }
    const doclick = () => {
        page++
        // 判断page大于等于3,如果是就让page的值为3
        (page > 3) && (page = 0)
        x = -page * pagewidth
        getbox(x)
    }
    const doclicks = () => {
        page--
        // 判断page大于等于3,如果是就让page的值为3
        (page < 0) && (page = 3)
        x = -page * pagewidth
        getbox(x)
    }