来源demo:
<CountUp
start={-875.039}
end={160527.012}
duration={2.75}
separator=" "
decimals={4}
decimal=","
prefix="EUR "
suffix=" left"
onEnd={() => console.log('Ended! 👏')}
onStart={() => console.log('Started! 💨')}
>
{({ countUpRef, start }) => (
<div>
<span ref={countUpRef} />
<button onClick={start}>Start</button>
</div>
)}
</CountUp>
测试demo：
import React from 'react';
import _ from 'lodash';
import CountUp from 'react-countup';
import OnVisible from 'react-on-visible';
class CountUpPanel extends React.Component {
countUpStart = _.noop;
constructor(props) {
super(props);
this.state = {
count:1000,
visible: false
};
}
handleChange = (value) => {
let { visible } = this.state;
if (!visible) {
this.setState({
visible: value
}, () => {
this.countUpStart();
});
}
};
render() {
const { count } = this.state;
return (
<OnVisible onChange={this.handleChange}>
<CountUp start={0} end={count} separator=','>
{({ countUpRef, start }) => {
this.countUpStart = start;
return <span ref={countUpRef}/>;
}}
</CountUp>
</OnVisible>
);
}
}
export default CountUpPanel;
