数字滚动组件（react）

基于react实现一个数字滚动组件（vue也一样，逻辑相同）

直接上代码

1.number-roll.tsx

interface NumberRollProps {value: number;
}
const NUMBER_LIST = Array.from(new Array(10).keys());
const SCROLL_HEIGHT = -15; // 数字滚动高度（也就是数字字体大小），可根据字体大小修改
const NumberRoll = (props: NumberRollProps) => {const { value } = props;const style = {top: `${SCROLL_HEIGHT * value}px`,};return (<div className="number-animation-wrap"><div className="number-animation-wrap-hidden">0</div><div className="number-animation" style={style}>{NUMBER_LIST.map((item, index) => (<div className="number" key={index}>{item}</div>))}</div></div>);
};
export default memo(NumberRoll);

2.number-roll.scss

.number-animation-wrap {position: relative;display: inline-block;overflow: hidden;.number-animation {position: absolute;left: 0;top: 0;height: auto;transform-origin: 0 0;transition: top 0.4s;  // 可调整滚动速度}.number, .number-animation-wrap-hidden {font-size: 15px;    // 数字滚动高度line-height: 15px;height: 15px;font-weight: 400;text-align: center;}.number-animation-wrap-hidden{visibility: hidden;}
}

3.使用组件的方式

import NumberRoll from './number-roll.tsx';
const [number,setNumber] = useState(0);
number?.toString()?.split('')?.map((numberItem, index) => (<NumberRoll key={index} value={Number(numberItem)} />
))
// 在number改变时调用setNumber更新state，就能看到数字滚动的动画了

完毕！

数字滚动组件（react）相关推荐

react 数字滚动组件
效果图给数字做了逗号符分割,更符合国际大额数字的浏览效果. /** @Descripttion:* @version:* @Author: dal* @Date: 2021-11-02 16:48: ...
初级开发者福音：手把手教你实现数字滚动效果~
文章目录一.前言二.背景知识三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件一.前言前端数字滚动显示的场景很多, ...
php实现数字滚动效果,vue如何实现数字滚动增加效果？代码示例
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^ 数字滚动组件: 0 props: { time: { type: Number, default: 2 ...
Vue 实现数字滚动效果
效果就是显示某个数值不是直接显示,而是从0开始滚动,直到为那个数值时停止滚动 1.新建数字滚动组件:test.vue文件 <template><div class="num ...
css 数字滚动效果
先看效果图一.前置条件首先了解两个css字符排版的样式 1. writing-mode 设置文本行是水平还是垂直布局 horizontal-tb:默认值,表示水平排版,从上到下 vertical- ...
Vue组件——数字滚动抽奖效果
闲话不多说(希望对大家有帮助),那就直接上代码吧可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意) 不一一精简了组件代码 < ...
vue数字滚动效果组件
数字滚动变化效果组件效果预览体验地址用途大屏展示,数字滚动效果实现使用js控制元素移动. 关键代码如下: //修改 chang(oldVal,newVal,id){if(oldVal & ...
【React】手写虚拟滚动组件（二）可自动获取不定高度的虚拟滚动组件
前言上次那篇写的虚拟滚动后来使用发现在某些情况并不是特别好用,并且只支持固定高度.我看了下umihook的虚拟滚动,发现也不是很好用,它支持手动设定每个元素高度,但也不能支持不定高度,而且限定更多了 ...
【react】InfiniteScroll 滚动组件
在data.d.ts中定义父组件所需要传的值 import { ReactNode } from 'react' type PullStatus = 'pulling' | 'canRelease' ...

数字滚动组件（react）

基于react实现一个数字滚动组件（vue也一样，逻辑相同）

1.number-roll.tsx

2.number-roll.scss

3.使用组件的方式

数字滚动组件（react）相关推荐

最新文章

热门文章