用antd的List做动态滚动展示
项目中需要做一个类似于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; } } }
具体样式,自动向上滚动,溢出隐藏: