【Reactjs】数字滚动组件

最新推荐文章于 2024-08-09 07:23:48 发布

u011032217

最新推荐文章于 2024-08-09 07:23:48 发布

阅读量567

点赞数 1

文章标签： javascript react.js html5 css

本文链接：https://blog.csdn.net/u011032217/article/details/124570426

版权

本文介绍了如何在ReactJS中创建一个数字滚动组件。通过结合JavaScript、ReactJS、HTML5和CSS技术，实现动态滚动数字的效果，适用于展示实时更新的计数或统计数据。

摘要由CSDN通过智能技术生成

使用

<ScrollNumItem num={
   9} />

scrollNumItem.jsx

import React, {
    Component } from "react"
import './scrollNumItem.less';
export default class ScrollNumItem extends Component {
   
    constructor(props) {
   
        super(props)
        this.state = {
   
            visible: true
        }
        this.ref = React.createRef()
        this.numRef = React.createRef()
        this.oldNum = 0
        this._height = 0
    }
    componentDidMount() {
   
        this._height = this.n