react的ul li滚动列表

西洛.sco2024-08-22 9:43

父组件

css 复制代码

  <NewOrderRoll orderGroup={orderGroup} />

组件

javascript 复制代码

import './newOrderRoll.less';

const newOrderRoll = (orderGroup: any) => {

    const handle = (data: String): String[] => {
        return data.split(':');
    }



    return (
        <>
            <div className="scroll_page">
                <ul className='scroll_page-head'>
                    <li>订单编号</li>
                    <li>销售员</li>
                    <li>用户</li>
                    <li>销售额(元)</li>
                    <li>下单日期</li>
                </ul>
                <div className="ul-wrapper">
                    <ul className="scroll_page-item">
                        {
                            orderGroup?.orderGroup.map((order: String, index: any) => {
                                const tempData = handle(order);
                                return <ul key={index} className='scroll_page-item-ul flex-center'>{
                                    tempData.map((item: String, key: any) => {
                                        return <li key={key}>{item}</li>
                                    })
                                }</ul>
                            })
                        }
                    </ul>
                </div>
            </div>
        </>
    )
}

export default newOrderRoll;

css 复制代码

.scroll_page {
    margin: 0;
    padding: 2px 0;
    list-style: none;
    overflow: hidden;
    border: 1px #5d70ea solid;
    font-size: 16px;
    text-align: center;
    // background-color: #5d70ea;
    opacity: 0.5;
    // height: ~'calc(299px / 1920px * 100%)';
    height: 20vh;


    &-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;

        &>li {
            text-align: center;
            background: rgba(255, 255, 255, 0.14);
            width: 20%;
            font-size: 11px;
            font-weight: 500;
            color: #96D3FE;
            line-height: 32px;
        }
    }

    .ul-wrapper {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    &-item:hover {// 鼠标经过暂停
        animation-play-state: paused;
    }

    &-item {// infinite 无限滚动 linear匀速 anim 名称 normal默认值（结束后再从头开始）
        height: 100%;
        animation: 15s anim linear infinite normal;

        &-ul {
            width: 100%;
            justify-content: space-between;

            &>li {
                width: 25%;
                text-align: center;
                margin: 0;
                padding: 0 4px;
                font-size: 11px;
                height: 30px;
                line-height: 30px;
                color: #96D3FE;
            }
        }
    }
}

@keyframes anim {

    0% {
        transform: translateY(-0%);
    }

    100% {
        transform: translateY(-100%);
    }
}