用antd的List做動態滾動展示

阿新 • • 發佈：2020-07-23

　　專案中需要做一個類似於Table的展示列表,但是需要迴圈滾動播放列表內容

　　不多說直接上程式碼:

js部分:

export default class RealTime extends PureComponent {
    state = {
        sectionDomHeight: 0
    }

    componentDidMount() {
        this.computeHeight();
    }
    computeHeight = () => {
        setTimeout(() => {
            let sectionDomHeight  
= this.sectionDom && this.sectionDom.offsetHeight || 0;
            this.setState({
                sectionDomHeight
            })
        }, 0)
    }
    handleSection = n => {
        this.sectionDom = n;
    };

    render() {
        const { getLoading } = this.props;

        let list  
= []
        for(let i=0;i<12;i++){
            list.push({
                'Intl_time_of_occurrence': '2020-07-22 18:55:50',
                'Intl_file_name': i,
                'Intl_source_ip': '192.168.1.201',
                'Intl_dection_ip': '27.115.124.142',
                'Intl_area': '上海',
                 
'Intl_protocol': 'HTTP',
                'Intl_file_type': 'Word',
                'Intl_sensitivity': '高敏感',
                'Intl_manner': '上傳',
            })
        }
        const messageList = (
            <List
                bordered={false}
                dataSource={list}
                renderItem={(item, index) => {
                    return <List.Item>
                        <span className={styles.texts}>
                            <span>{item.Intl_time_of_occurrence}</span>
                            <span>{item.Intl_file_name}</span>
                            <span>{item.Intl_source_ip}</span>
                            <span>{item.Intl_dection_ip}</span>
                            <span>{item.Intl_area}</span>
                            <span>{item.Intl_protocol}</span>
                            <span>{item.Intl_file_type}</span>
                            <span>{item.Intl_sensitivity}</span>
                            <span>{item.Intl_manner}</span>
                            <span>
                                <Button className="operateBtn primary">{intl.get("Intl_detail")}</Button>
                                <Button className="operateBtn primary">{intl.get("Intl_analyzes")}</Button>
                                <Popconfirm
                                    title={intl.get("Intl_are_you_sure_about_the_deposition")}
                                    okType="danger"
                                    onConfirm={()=>this.handleEvidenc(item)}
                                >
                                    <Button className="operateBtn primary">{intl.get("Intl_obtain_evidence")}</Button>
                                </Popconfirm>
                            </span>
                        </span>

                    </List.Item>
                }
                }
            />
        )
        return (
            <div className={styles.box} style={{ marginTop: '10px' }}>
                <div className={styles.title}>
                    <span className={styles.text}>{intl.get('Intl_real_time_leak_event')}</span>
                </div>
                <div className={styles.header}>
                    <span>{intl.get('Intl_time_of_occurrence')}</span>
                    <span>{intl.get('Intl_file_name')}</span>
                    <span>{intl.get('Intl_source_ip')}</span>
                    <span>{intl.get('Intl_dection_ip')}</span>
                    <span>{intl.get('Intl_area')}</span>
                    <span>{intl.get('Intl_protocol')}</span>
                    <span>{intl.get('Intl_file_type')}</span>
                    <span>{intl.get('Intl_sensitivity')}</span>
                    <span>{intl.get('Intl_manner')}</span>
                    <span>{intl.get('Intl_operation')}</span>
                </div>
                <div className={[styles.container, this.state.sectionDomHeight > 440 ? styles.scroll : null].join(' ')} style={{ height: 440 }}>
                    <div className={styles.section} ref={this.handleSection} style={{ animationDuration: `${list.length / 0.6}s` }}>
                        {messageList}
                    </div>
                    {
                        (this.state.sectionDomHeight > 440) && (
                            <div className={styles.section} style={{ animationDuration: `${list.length / 0.6}s` }}>
                                {messageList}
                            </div>
                        )
                    }
                </div>
            </div>
        );
    }
}

//intl部分是國際化語言,自動忽略或看成文字

less部分:

/*核心css*/
.box{
    border: 1px solid #e8e8e8;
    padding: 20px;
    .title{
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .text{
            font-size: 16px;
            font-weight: 800;
        }
    }
    .header{
        span{
            display: inline-block;
            width: 10%;
            text-align: center;
            background: #F4F6F9;
            height: 40px;
            line-height: 40px;
        }
    }
}
@keyframes moveup {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

.container.scroll {
    overflow: hidden;
    .section {
        margin: 0;
        animation: moveup 20s linear infinite;
        &:hover {
            animation-play-state: paused;
        }
    }
    &:hover {
        .section {
            animation-play-state: paused;
        }
    }
}

.container {
    :global(.ant-list-item-action) {
        margin-left: 14px ;
    }
    :global(.ant-list-split .ant-list-item) {
        border:1px solid #e8e8e8;
        padding: 5px 0;
    }
    .texts {
        position: relative;
        width:100%;
        font-size: 12px;
        cursor: pointer;
        span{
            display: inline-block;
            width: 10%;
            text-align: center;
        }
        &:hover{
            color: #198ce1;
        }
    }
}