React-FlipOver-Counter（日历翻页）

跟窝一起学习鸭~~

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render( < App / > , document.getElementById('root'));
registerServiceWorker();

//app.jsx根App
import React, {
    Component
} from 'react';
import TotalQty from './components/TotalQty'

class App extends Component {

    render() {

        return (
            <TotalQty />
        )


    }
}

export default App;

//TotalQty.jsx
import React, { Component } from 'react'
import './totalQty.less'
import FlipOverCounter from './flipOver/FlipOverCounter'
export class TotalQty extends Component {
// 父组件先定义state通过props传值
    constructor(props) {
        super(props)
        //定义初始的值最小为50 长度这个日历是7位数
        // 时间是60000ms更新一次吗？
        this.state = {
            min: 50,
            max: 0,
            time: 60000,
            len: 7
        }
    }

    componentDidMount() {
        const a = 100;
        //a是什么东西，为了设置最大值为50+100吗？
        const ths = this;
        ths.setState({
            max: ths.state.max + a
        })
        //每这个时间60000就清除一次定时器
        this.time1 = setInterval(function () {
            ths.setState({
                max: ths.state.max + a,
                min: ths.state.max
            })
        }, 60000)

    }

    render() {
        const { min, max, time, len } = this.state;
        return (
            <div className='totalQty'>
                <div className='box'>
                    <FlipOverCounter
                        min={min}
                        max={max}
                        time={time}
                        len={len}
                    />
                </div>

            </div>
        )
    }
}

export default TotalQty

//翻页FlipOverCounter.jsx
//有些代码不是很懂，但是小姐姐很赞，我很喜欢写这个代码的小姐姐
//FlipOverCounter.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './flipOverCounter.less'

export class FlipOverCounter extends Component {

    constructor(props) {
        super(props)
        //通过props接收父组件传过来的值
        this.state = {
            min: props.min,
            max: props.max,
            time: props.time,
            len: props.len,
            currentNums: this.zfill(props.min)
        }
        this.resetNo = this.resetNo.bind(this)
        this.run = this.run.bind(this)
    }

    componentDidMount() {
        //页面挂载就挂载resetNo
        this.resetNo()
    }

    //补0zfill传入值
    zfill(num) {
        var s = "000000000" + num;
        // 当长度到什么的时候就传入的值？
        return s.toString().substr(s.length - this.props.len).split("");
    }

    //初始化数值填入
    resetNo() {
        const { min } = this.state;
        // 当前的值
        const currentNums = this.zfill(min)
        this.setState({ currentNums }, function () {
            this.run()
        })
    }

    //初始化执行
    run() {
        const { min, max, time, currentNums } = this.state;
        const difference = max - min;
        if (difference < 1) return;
        //每次要执行动画的时间
        let t = Math.round(time / difference);
        let speedTyp = 'normal'
        //执行速度class  定义了2种不同程度的速度控制样式
        if (t >= 300) {
            if (t > 1500) t = 1500;
            speedTyp = 'normal'
        } else {
            if (t < 100) t = 100;
            speedTyp = 'quick'
        }
        let newCount = min;
        //翻页
        function increase() {
            if (newCount === max || newCount > max) {
                clearInterval(this.timer1);
                return false;
            }
            //慢速一页页翻
            if (speedTyp === 'normal') {
                newCount++;
            } else {
                if (difference > 800 && t <= 200) {
                    t = 200;
                    //直接设置数字
                    newCount = newCount + Math.floor(difference / (time / 200))
                } else {
                    //快速翻
                    newCount = newCount + 2
                }
            }
            const newNums = this.zfill(newCount)
            this.setState({ speedTyp, currentNums: newNums })
        }
        //执行翻页
        if (this.timer1) clearInterval(this.timer1);
        this.timer1 = setInterval(increase.bind(this), t);
    }

    componentWillReceiveProps(props) {
        //resetNo()重新
        if (Object.keys(props)) {
            //props值改变，重新在setState
            if (props.max !== this.state.max) {
                this.setState({
                    min: props.min,
                    max: props.max,
                    time: props.time,
                    len: props.len
                }, function () {
                    this.resetNo()
                })
            }
        }
    }

    render() {
        const { len, currentNums } = this.state;
         // 这边看不懂
        const flipItems = currentNums.map((value, idx) => {
            let preIndx = value === "0" ? 9 : value * 1 - 1;
            return (
                <div key={idx} className='focount_box'>
                    <div className="focount_set" >
                        {Array.from({ length: 10 }, (key, j) => j.toString()).map((sval, sdx) => {
                            return (
                                <div key={sdx} className={value === sval ? 'active focount' : sval === preIndx.toString() ? 'previous focount' : 'focount'}>
                                    <div className="focount_top">
                                        <span className="focount_wrap">{sdx}</span>
                                    </div>
                                    <div className="shadow_top"></div>
                                    <div className="focount_bottom">
                                        <span className="focount_wrap">{sdx}</span>
                                    </div>
                                    <div className="shadow_bottom"></div>
                                </div>
                            )
                        })
                        }
                    </div>
                    {
                        (len - idx - 1) % 3 === 0 && (len - idx - 1) !== 0 ?
                            <div className='dotBox'>
                                <div className='dot'>
                                </div>
                            </div> : ''

                    }
                </div>)
        })
        return (
            <div className='flipOverCounter normal'>
                {flipItems}
            </div>
        )
    }
}
//静态类型检验
FlipOverCounter.propTypes = {
    min: PropTypes.number, //初始数值
    max: PropTypes.number, //最大数字
    time: PropTypes.number, //翻页总时长
    len: PropTypes.number //数字是几位数
}

FlipOverCounter.defaultProps = {
    min: 0,
    max: 0,
    time: 120000,
    len: 6
}


export default FlipOverCounter

这个是我很喜欢的小姐姐的github地址，大家快快关注小姐姐哇~~

React-FlipOver-Counter（日历翻页）

猜你喜欢