React + TS + hooks 无缝轮播图移动端

最新推荐文章于 2023-04-09 13:10:04 发布

一个牛肉丸

最新推荐文章于 2023-04-09 13:10:04 发布

阅读量607

点赞数 3

文章标签： react.js javascript 前端 typescript

本文链接：https://blog.csdn.net/a2316689/article/details/124592930

版权

本文介绍如何在React项目中结合TypeScript和hooks实现一个高效的移动端无缝轮播图组件。通过阅读，你将了解到如何在index.tsx文件中进行组件定义，以及如何利用less文件进行样式设置。

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

index.tsx 文件

import { useRef, useEffect } from 'react'
import './index.less'
export default function Swipers() {
    
    const dragBox = useRef<HTMLDivElement | null>(null);
    const getdragBox = () => dragBox.current as HTMLDivElement;

    let disX: number = 0;
    let X: number = 0;
    let page: number = 0;
    let startX: number = 0
    let endX: number = 0
    let pageWidth: number = 0


    const setDrag = (X: number) => {
        return getdragBox().style.transform = `translate3d(${X - pageWidth}px,0px,0px)`
    }
    const leftDrag = () => {
        getdragBox().style.transition = ".3s ease all"
        page++
        X = -page * pageWidth
        getdragBox().ontransitionend = fnE
        setDrag(X)
    }

    const rightDrag = () => {
        getdragBox().style.transition = ".3s ease all"
        page--