react的ul li滚动列表

父组件

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%);
    }
}
相关推荐
Angel_girl31917 分钟前
vue项目使用svg图标
前端·vue.js
難釋懷22 分钟前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo23 分钟前
Ajax入门
前端·ajax·okhttp
爱生活的苏苏1 小时前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪1 小时前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星1 小时前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.1 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁1 小时前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶1 小时前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
且白2 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器