react+ts写龙播图

 index.tsx

import {useRef,useEffect} from "react"
import { start } from "repl"
import "./index.less"


export default function Swiper() {
  const drag = useRef<HTMLDivElement | null>(null)
  let x:number=0
  let disX:number=0
  let startX:number=0
  let endX:number=0
  let page:number=0
  let pageWidth:number=0
  const getDrag=()=>{
    return drag.current as HTMLDivElement
  }
  useEffect(()=>{
    getDrag().ontouchstart = FnStart;
    pageWidth = document.documentElement.clientWidth
  })
  const setDrag=(x:number)=>{
    getDrag().style.transition=".4s ease transform"
    getDrag().style.transform=`translate3d(${x}px,0px,0px)`
  }
  const FnStart=(ev:TouchEvent)=>{
    getDrag().style.transition="none"


    startX = ev.changedTouches[0].pageX
    disX =ev.changedTouches[0].pageX - x
    
    document.ontouchmove = FnMove;
    document.ontouchend = FnEnd;
    return false
  }
  const FnMove=(ev:TouchEvent)=>{
    x = ev.changedTouches[0].pageX - disX
    console.log("000")
    getDrag().style.transform = `translate3d(${x}px,0px,0px)`
  }
  const FnEnd=(ev:TouchEvent)=>{
    endX = ev.changedTouches[0].pageX
    // 判断向左还是向右
    if(Math.abs(endX-startX)>=50){
      // 走一张
      if(endX<startX){
        page++
        if(page>=3)page=3
        x= -page*pageWidth
        setDrag(x)
      }else{
        page--
        if(page<=0)page=0
        x= -page*pageWidth
        setDrag(x)
      }
    }else{
      // 继续在当前
      x=-page*pageWidth
      setDrag(x)
    }
    document.ontouchmove = null;
    document.ontouchend = null;
  }
  return <>
    <div className="swiper">
      <div className="swiper-box" ref={drag}>
        <div className="swiper-box-item">0</div>
        <div className="swiper-box-item">1</div>
        <div className="swiper-box-item">2</div>
        <div className="swiper-box-item">3</div>
      </div>
    </div>
  </>
}

index.less

.swiper{
    width: 100vw;
    height: 30vh;
    background-color: aqua;
    overflow: hidden;
    .swiper-box{
      width: calc(750px * 7);
      height: 30vh;
      display: flex;
      .swiper-box-item{
        width: 100vw;
        height: 30vh;
        font-size: 70px;
        text-align: center;
        line-height: 30vh;
      }
      .swiper-box-item:nth-child(1){
        background-color: rgb(0, 255, 98);
      }
      .swiper-box-item:nth-child(2){
        background-color: rgb(255, 0, 149);
      }
      .swiper-box-item:nth-child(3){
        background-color: rgb(68, 0, 255);
      }
      .swiper-box-item:nth-child(4){
        background-color: rgb(128, 0, 92);
      }

    }
  }