react不用插件实现数字滚动的方法
这篇文章主要讲解了react不用插件实现数字滚动的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联建站主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设、程序开发、网站优化、微网站、小程序设计等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的做网站、网站制作、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。
突然要实现个数字滚动效果,网上一搜,一大堆都是用组件的。我只是想实现个简单的效果而已,决定还是自己搞搞吧。
先来看看效果吧
也不多说了,实现起来不难,但是有点细节问题需要自己好好琢磨一下
大概思路,
1.一开始为0,获取第一次数据,记录下来
2.和前一次数据进行对比
3.然后transform
4.最后收工
好了,附上代码、
export default class Number extends React.Component { constructor(props) { super(props); this.state = { prev: "000000",//初始化6位数 next: "000000", inits: 0, listAll: [[0],[0],[0],[0],[0],[0]], contrlAnimationWay: false } this.key1 = 0 } componentWillUnmount() { } componentDidMount() { setTimeout(()=>{ this.run() }) // this.setTimer() } // 获取数据 getNumber() { let { inits } = this.state let random = Math.floor(Math.random() * (100000 - 1) + 1); let prev = this.addZero(inits, 6) let next = this.addZero(inits + 1235, 6) this.setState({ inits: inits + 1235 }) console.log(99, prev); console.log(99, next); this.getData(prev, next) } // 数字补零 addZero(num, n) { let len = num.toString().length; while (len < n) { num = "0" + num; len++; } return num; } // 对比数据前后变化 getData(prev, next) { let { listAll } = this.state listAll = []; let prevArray = prev.toString().split(""); let nextArray = next.toString().split(""); console.log(11, prevArray); console.log(22, nextArray); let listInit = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; for (let i = 0; i < prevArray.length; i++) { let prevNumber = parseInt(prevArray[i]); let nextNumber = parseInt(nextArray[i]); let start = -1; let end = -1; for (let j = 0; j < listInit.length; j++) { if (listInit[j] === prevNumber) { start = j; } if (start !== -1 && listInit[j] === nextNumber) { end = j; break; } } listAll.push(listInit.slice(start, end + 1)); console.log(listAll); } this.setState({ listAll }) } run() { this.getNumber() this.key1++ } setTimer() { setInterval(() => { setTimeout(()=>{ this.run() }, 0); }, 1000 * 4) } render() { let { listAll } = this.state; return{/* 数字滚动 */}} }{/* 数字end */}累计{ listAll.map((list, i) => { return}) }{ list.map((item, index) => { return{item}}) }人已参与
css
/* 数字滚动 */ .box-number { /* background: green; */ display: flex; flex-direction: row; justify-content: center; align-items: center; color: rgb(36, 35, 35); height: 100px } .list-wrap { height: 3rem; width: 3rem; text-align: center; overflow: hidden; margin: 0.1rem; border: 2px rgb(19, 19, 18) solid; border-radius: 2px; } .roll div { font-size: 2rem; line-height: 3rem; } .roll_1 { -webkit-animation: roll_1 2s forwards; /* Safari 与 Chrome */ } .roll_2 { -webkit-animation: roll_2 2s forwards; /* Safari 与 Chrome */ } .roll_3 { -webkit-animation: roll_3 2s forwards; /* Safari 与 Chrome */ } .roll_4 { -webkit-animation: roll_4 2s forwards; /* Safari 与 Chrome */ } .roll_5 { -webkit-animation: roll_5 2s forwards; /* Safari 与 Chrome */ } .roll_6 { -webkit-animation: roll_6 2s forwards; /* Safari 与 Chrome */ } .roll_7 { -webkit-animation: roll_7 2s forwards; /* Safari 与 Chrome */ } .roll_8 { -webkit-animation: roll_8 2s forwards; /* Safari 与 Chrome */ } /*省略roll_2——roll_8*/ .roll_9 { -webkit-animation: roll_9 2s forwards; /* Safari 与 Chrome */ } @-webkit-keyframes roll_1 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -3rem, 0); } } @-webkit-keyframes roll_2 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -6rem, 0); } } @-webkit-keyframes roll_3 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -9rem, 0); } } @-webkit-keyframes roll_4 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -12rem, 0); } } @-webkit-keyframes roll_5 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -15rem, 0); } } @-webkit-keyframes roll_6 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -18rem, 0); } } @-webkit-keyframes roll_7 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -21rem, 0); } } @-webkit-keyframes roll_8 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -24rem, 0); } } @-webkit-keyframes roll_9 /* Safari 与 Chrome */ { 0% { transform: translate3d(0, 0px, 0); } 100% { transform: translate3d(0, -27rem, 0); } }
看完上述内容,是不是对react不用插件实现数字滚动的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
本文标题:react不用插件实现数字滚动的方法
URL链接:http://ybzwz.com/article/jjjjso.html