微信订餐小程序_react 不用插件完成数字滚动的效

日期:2021-01-05 类型:行业动态 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

react 不用插件实现数字滚动的效果示例       这篇文章主要介绍了react 不用插件实现数字滚动的效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

突然要实现个数字滚动效果,网上一搜,一大堆都是用组件的。我只是想实现个简单的效果而已,决定还是自己搞搞吧。

先来看看效果吧

也不多说了,实现起来不难,但是有点细节问题需要自己好好琢磨一下

大概思路,

1.一开始为0,获取第一次数据,记录下来

2.和前一次数据进行对比

3.然后transform

4.最后收工

好了,附上代码、

export default class Number extends React.Component {
 constructor(pro凡科抠图) {
 super(pro凡科抠图);
 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()

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 div className="new-tmall911" {/* 数字滚动 */} div className="box-number" div this.setTimer.bind(this)} 累计 /div listAll.map((list, i) = { return div key={i} className="list-wrap" div className={`roll roll_${list.length - 1}`} key={this.key1++} list.map((item, index) = { return div key={index} {item} /div /div /div div 人已参与 /div /div {/* 数字end */} /div }

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 数字滚动内容请搜索凡科以前的文章或继续浏览下面的