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 axios配置代理(proxy),如何解决本地开发时的跨域问题
这篇文章主要介绍了react axios配置代理(proxy),如何解决本地开发时的跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
本篇文章主要介绍了一个基于react的图片裁剪组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了浅谈React Event实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
mobx是一个轻量级的状态管理器,所以很简单(单一全局数据使用class)类有get 数据方法,本文通过示例代码介绍react mobx 基本用法,感兴趣的朋友有一起看看2023-11-11
React在使用时非常灵活，如果没有一个规范约束项目，在开发过程中会非常混乱，本文将介绍几个优秀的规范，介绍文件名和目录前，需要先简述一下几种通用的类型，用来区分文件的功能，感兴趣的朋友一起看看吧2022-05-05
邮箱、手机验证码输入是许多在线服务和网站常见的安全验证方式之一,本文主要来和大家讨论一下如何使用React封装一个验证码输入控件,感兴趣的可以了解下2024-03-03
React 无状态组件(Stateless Component) 与高阶组件
这篇文章主要介绍了React 无状态组件(Stateless Component) 与高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
笔者最近用react useEffect闭包，其中踩到了一些坑在此与大家分享一下。需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了react-router-dom 降低版本的两种方法,本篇文章就记录下如何降低 react-router-dom 为 v5 版本的两种方法，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了React如何动态控制伪元素样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论