React实现数字滚动组件numbers-scroll的示例详解
数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件，第一反应就是想找找网上大佬的东西顶礼膜拜一下，这一搜，还真是没找到趁手的╮(╯▽╰)╭。
最近接了大屏的需求，数字滚动肯定是免不了的，所以开始撸袖子，造轮子了（ numbers-scroll ）。
首先给大家看下轮子的效果吧：
一、设计原理
如果要做到数字滚动效果，就一定要让数字有从下往上移动的感觉。如果只是纯粹的数字变化，显示出来的效果就会比较普通了，没有什么视觉上的冲击感，如图所示：
所以，我们需要数字在变化过程中，有种纸带往上抽的感觉。初始状态中，数字都在显示框下方等待。数字滚动中，则根据数字的大小决定滚动速度，数字越大，滚动越快；数字越小，则滚动越慢，这样会有一种参差的感觉，滚动的效果也会让人觉得更自然一些。
二、实现方式
初始状态中，每个数字展示的窗口下边都有0-9这10个数字在等待中，传入具体数字后，每个窗口就可以开始移动数字的位置了。
移动数字的位置可以有三种方式：1. 通过js改变样式（虽然逻辑更容易实现，但是执行效率太低，直接放弃）；2. 通过animation来控制margin-top的值。3. 通过animation来控制transform的值。
虽然个人觉得通过tranform来控制显示位置会更好些，但是目前采用的是方式二，控制margin-top的值来展示数字的位置，效果还算可以了，有兴趣的同学可以改造成transform。
React代码片段如下：
<span className={scrollClass}>
<label style={numberStyle}>0</label>
<label style={numberStyle}>1</label>
<label style={numberStyle}>2</label>
<label style={numberStyle}>3</label>
<label style={numberStyle}>4</label>
<label style={numberStyle}>5</label>
<label style={numberStyle}>6</label>
<label style={numberStyle}>7</label>
<label style={numberStyle}>8</label>
<label style={numberStyle}>9</label>
<label style={numberStyle}>0</label>
</span>Css代码片段如下：
.numbers-scroll00 {
margin-top: -10 * $marginTop;
animation: scrollNumber0 1s linear 1 normal;
-moz-animation: scrollNumber0 1s linear 1 normal;
-webkit-animation: scrollNumber0 1s linear 1 normal;
-o-animation: scrollNumber0 1s linear 1 normal;
}
@keyframes scrollNumber0 {
0% { margin-top: 0px; }
100% { margin-top: -1100;}
}三、使用方式
1. 安装依赖：
npm install numbers-scroll --save
2. 引入数字滚动组件的两种示例：
// 示例1
import React, { useState } from 'react'
import NumbersScroll from 'numbers-scroll'
const MyNumberScroll = () => {
const [number, setNumber] = useState(896507);
return (
<div className="example-container">
<NumbersScroll
split={true}
value={number}
numberStyle={{
fontSize: 50,
background: "#51a4e9",
color: "#fff",
marginLeft: 2,
marginRight: 2
}}
/>
</div>
)
}
// 示例2
import React, { Component } from "react"
import NumbersScroll from 'numbers-scroll'
class MyNumberScroll extends Component {
constructor(props) {
super(props)
this.state = {
number: 896507
}
}
render() {
const { number } = this.state
return <div className="example-container">
<NumbersScroll
split={true}
value={number}
numberStyle={{
fontSize: 50,
background: "#51a4e9",
color: "#fff",
marginLeft: 2,
marginRight: 2
}}
/>
</div>
}
}四、参数说明
为了能够让组件应用在更多场景中，可以传入4个参数：split，value，numberStyle，containerStyle；其中numberStyle，containerStyle可以分别控制数字和容器的样式，用户可以随时调整以适应自己的场景。
| 参数名 | 是否必须 | 默认值 | 描述 |
| split | 否 | fasle | 是否加上分隔符 |
| value | 是 | 0 | 显示数字 |
| numberStyle | 否 | 数字的样式 | |
| containerStyle | 否 | 容器的样式 |
numbers-scroll这个组件目前仅支持react，可以用于多种场景。
到此这篇关于React实现数字滚动组件numbers-scroll的示例详解的文章就介绍到这了,更多相关React数字滚动组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天我们来学习React是如何构建起一个单页应用的，React作为目前最流行的前端框架之一，其受欢迎程度不容小觑，从这门框架上我们可以学到许多其他前端框架所缺失的东西，也是其创新性所在的地方，比如虚拟DOM、JSX等。下面一起来看看。2016-08-08
这篇文章主要为大家介绍了React Fiber构建源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
react-native 父函数组件调用类子组件的方法(实例详解)
这篇文章主要介绍了react-native 父函数组件调用类子组件的方法,通过详细步骤介绍了React 函数式组件之父组件调用子组件的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了react显示文件上传进度的示例，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了React如何实现全屏监听Esc键，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了React中的路由嵌套和手动实现路由跳转的方式,手动路由的跳转，主要是通过Link或者NavLink进行跳转的，实际上我们也可以通JavaScript代码进行跳转，需要的朋友可以参考下2022-11-11
这篇文章讲述了React的基本介绍,基本使用和React相关js库.通过这篇文章可以入门React的使用,可以快速上手使用React进行代码的编写2021-06-06
这篇文章主要介绍了关于useEffect的第二个参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
React Router提供了几种不同的跳转方式,包括使用组件进行页面跳转、使用组件进行重定向,以及使用编程式导航进行跳转,这篇文章主要介绍了React中的页面跳转方式详解,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了每天学习一个hooks useMount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论