react标题左右滑动轮播图

最新推荐文章于 2024-08-12 13:58:41 发布

樱颜

最新推荐文章于 2024-08-12 13:58:41 发布

阅读量634

点赞数

文章标签： javascript 前端开发语言 react.js

本文链接：https://blog.csdn.net/weixin_58160355/article/details/124568213

版权

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

摘要由CSDN通过智能技术生成

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

效果图：

我们话不多说：

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 Fn