React+Ts 无缝轮播

你怎么生气了

已于 2022-06-30 08:48:47 修改

阅读量194

点赞数

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

于 2022-06-30 07:53:49 首次发布

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

版权

import React, { Component, createRef } from 'react'
import "./index.less";
export default class mm extends Component {
    tit = [3, 1, 2, 3, 1];
    state = { Index: 1, left: -100 }
    passBox = createRef<HTMLDivElement>()
    getpass = () => this.passBox.current as HTMLDivElement
    disx: number = 0
    x: number = 0
    start(ev: React.TouchEvent) {
        this.disx = ev.changedTouches[0].pageX;
        document.ontouchend = this.end.bind(this);
        document.ontransitionend = this.trend.bind(this);
    }
    move(ev: React.TouchEvent) {
        this.x = ev.changedTouches[0].pageX - this.disx
        this.setState({ left: this.state.Index * -100 + (this.x / 10) });
    }
    end() {
        var { Index, left } = this.state
        if (this.x > 150 && Index !== 0) Index--;
        if (this.x < -150 && Index <= 4) Index++;
        this.getpass().style.transition = ".3s all";
        this.setState({ Index: Index, left: Index * -100 });
    }
    trend() {
        var { Index, left } = this.state
        this.getpass().style.transition = "";
        if (this.getpass().offsetLeft === 0) {
            left = (this.tit.length - 2) * -100;
            Index = 3;
        } else if (Index === 4) {
            left = -100;
            Index = 1;
        }
        this.setState({ Index: Index, left: left });
    }
    render() {
        var { left } = this.state
        return (
            <div className='passow-Box'>
                <div className='pass-body' style={{ left: left + "vw" }} ref={this.passBox} onTouchStart={this.start.bind(this)} onTouchMove={this.move.bind(this)}>
                    {this.tit.map((item, index) => <div key={index}>
                        {item}
                    </div>)}
                </div>
            </div>
        )
    }
}

Index.less

.passow-Box {
    width: 100vw;
    height: 40vh;
    background-color: red;
    position: relative;
    overflow: hidden;

    .pass-body {
        width: 500%;
        height: 40vh;
        position: absolute;

        div {
            float: left;
            width: 100vw;
            height: 40vh;
            text-align: center;
            line-height: 40vh;
            font-size: 20px;

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

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

            &:nth-child(3) {
                background-color: green;
            }

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

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