react标题左右滑动轮播图_react 左右滚动播报-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_58160355/article/details/124568213

这篇博客介绍了如何在React应用中创建一个左右滑动的轮播图组件。作者强调了在实现过程中需要注意的点，包括编写tsx代码、样式处理以及在项目中配置路由的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们日常中，不管在看什么软件的时候都有轮播图一样的东西

效果图：

我们话不多说：

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>
  </>
}

less:

.swiper{
    width: 100vw;
    height: 30vh;
    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: pink;
      }
      .swiper-box-item:nth-child(2){
        background-color:  rgb(244, 115, 137);
      }
      .swiper-box-item:nth-child(3){
        background-color:  rgb(255, 58, 91);
      }
      .swiper-box-item:nth-child(4){
        background-color:  rgb(251, 34, 70);
      }
    }
  }

记住写路由！