ReactHook+Ts实现简易无缝轮播

最新推荐文章于 2024-05-22 11:20:37 发布

你怎么生气了

最新推荐文章于 2024-05-22 11:20:37 发布

阅读量528

点赞数

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/m0_64387562/article/details/126159313

版权

import React, { useRef, useState } from 'react'
import "./index.less";
export default function Rotation() {
    const tit = [3, 1, 2, 3, 1];
    const box = useRef<HTMLDivElement>(null);
    const [selectIndex, setselectIndex] = useState<number>(1);
    const [flag, setflag] = useState<boolean>(false);
    let disx = 0
    let x = 0
    const changestart = (ev: React.TouchEvent) => {
        disx = ev.changedTouches[0].pageX - x;
    }
    const trend = () => {
        setflag(false);
        if (box.current!.offsetLeft === 0) setselectIndex(3);
        if (selectIndex === tit.length - 1) setselectIndex(1);
    }
    const fnmove = (ev: React.TouchEvent) => {
        x = ev.changedTouches[0].pageX - disx
        box.current!.style.left = selectIndex * -100 + (x / 10) + 'vw';
    }
    const fnend = () => {
        setflag(true);
        if (x > 150 && selectIndex !== 0) setselectIndex(selectIndex - 1);
        if (x < -150 && selectIndex < 4) setselectIndex(selectIndex + 1);
    }
    return (
        <div className='rotation-Box'>
            <div className="rotaion-Box-body" onTransitionEnd={trend} ref={box} style={{ left: selectIndex * -100 + 'vw', transition: flag ? ".3s all" : '' }} onTouchStart={changestart} onTouchMove={fnmove} onTouchEnd={fnend}>
                {tit.map((item, index) => <div className='rotaion-Box-body-item' key={index}>
                    {item}
                </div>)}
            </div>
        </div>
    )
}

less

.rotation-Box {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .rotaion-Box-body {
        width: 500vw;
        height: 500px;
        display: flex;
        position: absolute;
        left: 0;
        top: 0;

        .rotaion-Box-body-item {
            width: 100vw;
            height: 500px;
            font-size: 50px;
            text-align: center;
            line-height: 500px;
            background-color: skyblue;

            &:nth-child(1) {
                background-color: pink;
            }

            &:nth-child(4) {
                background-color: pink;
            }

            &:nth-child(2) {
                background-color: orange;
            }

            &:nth-child(5) {
                background-color: orange;
            }
        }
    }

}