在react项目中使用表格无缝滚动!以下是一个表格无缝滚动的封装组件
import React from 'react';
import { observer } from 'mobx-react';
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
import './index.less';
@observer
class EditableTable extends React.Component {
constructor(props) {
super(props);
}
componentDidMount = () => {
//文字无缝滚动
this.industryNews = setInterval(this.taskIndustryNews, 50);
}
taskIndustryNews = () => {
if (this.refs.newDiv.scrollTop >= this.refs.newDivUI.offsetHeight - this.refs.newDiv.clientHeight) {
this.refs.newDiv.scrollTop = 0;
}
else {
this.refs.newDiv.scrollTop += 1;
}
}
handleIndustryNewsEnter = () => {
clearInterval(this.industryNews);
}
handleIndustryNewsLeave = () => {
this.industryNews = setInterval(this.taskIndustryNews, 50);
}
componentWillUnmount = () => {
clearInterval(this.industryNews);
}
render() {
return (
<div className='ceShiTable'>
<div className='ceShiTable-title'>
<span className='ceShiTable-text2'>12</span>
<span className='ceShiTable-text2'>123</span>
<span className='ceShiTable-text2'>1234</span>
<span className='ceShiTable-text2'>12334</span>
<span className='ceShiTable-text2'>12345</span>
</div>
<div
ref='newDiv'
className='ceShiTable-body'
onMouseEnter={this.handleIndustryNewsEnter.bind(this)}
onMouseLeave={this.handleIndustryNewsLeave.bind(this)}
>
<ul ref='newDivUI'>
{this.props.data && this.props.data.length > 0
?
this.props.data.map(this.tableBody)
: <span className='noData'>暂无数据</span>
}
</ul>
</div>
</div>
);
}
tableBody = (item, index) => {
return (
<li key={index}>
<span className='ceShiTable-text2'>
123
</span>
<span className='ceShiTable-text2'>
123
</span>
<span className='ceShiTable-text2'>
123
</span>
<span className='ceShiTable-text2'>
123
</span>
<span className='ceShiTable-text2'>
123
</span>
</li>
);
}
}
const EditableFormTable = Form.create()(EditableTable);
export default EditableFormTable;
css样式
.ceShiTable {
padding: 10px 15px;
text-align: center;
font-size: 12px;
height: 100%;
.ceShiTable-text2 {
width: 20%;
display: inline-block;
}
.ceShiTable-title {
background: rgba(0, 180, 251, 0.5);
font-weight: bold;
color: #000;
span {
font-size: 12px;
height: 24px;
line-height: 24px;
}
}
.ceShiTable-body {
height: calc(95% - 30px);
overflow-y: scroll;
color: #a1b6e5;
ul {
padding-inline-start: 0px;
.noData {
height: 78px;
line-height: 78px;
}
li {
background: transparent;
display: flex;
align-items: center;
min-height: 24px;
span {
font-size: 12px;
}
}
li:nth-child(2n) {
background: rgba(157, 217, 255, 0.1)
}
li:hover {
background: rgba(87, 98, 250, 0.4);
color: rgba(255, 255, 255, 1);
}
}
&::-webkit-scrollbar {
width: 3px;
}
&::-webkit-scrollbar-thumb {
// width: 3px;
background: rgba(0, 180, 251, 0.5);
border-radius: 7px;
box-shadow: inset 0 0 15px rgba(0, 180, 251, 1);
}
}
}
#效果图