React-umi-数字滚动效果

最新推荐文章于 2024-05-22 00:51:43 发布
最新推荐文章于 2024-05-22 00:51:43 发布
阅读量467 收藏
点赞数 1
分类专栏： 笔记 文章标签： js echarts react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Asurejiang/article/details/119774362
版权
本文介绍了如何通过Yarn下载并使用React CountUp插件，展示了一个从0滚动到66的简单例子，强调了duration参数的重要性，不设置会导致显示NaN。同时提供了相关使用文档链接，帮助开发者更好地理解和应用该插件。
摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

下载插件 yarn add react-countup

import CountUp from "react-countup";

<CountUp start={0} end={66}  duration={1}  />
start 为初始值 end为滚动到的数字 duration延时

//需要提示的是，duration必须设置，不然显示NaN(踩坑经历)

相关使用文档

如果觉得有用的话，麻烦给博主点个赞哟~

Asurejiang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 数字滑动器_css3 实现数字滚动的动画组件 （react版）
weixin_39983993的博客
12-22 830
.numbers-container{width:100%;height:50px;line-height:50px;margin-top:6px;display:flex;justify-content:center;$marginTop:50px;@keyframes scrollNumber0{0% { margin-top:0px; }100%{margin-top:-1100;}}@-m...
react 数字滑动器_react 不用插件实现数字滚动的效果示例
weixin_36261424的博客
02-04 847
突然要实现个数字滚动效果，网上一搜，一大堆都是用组件的。我只是想实现个简单的效果而已，决定还是自己搞搞吧。先来看看效果吧也不多说了，实现起来不难，但是有点细节问题需要自己好好琢磨一下大概思路，1.一开始为0，获取第一次数据，记录下来2.和前一次数据进行对比3.然后transform4.最后收工好了，附上代码、export default class Number extends React.Com...
react-该react组件用于数字滚动插件特别适用用于金额的滚动效果
08-15
该react组件用于数字滚动插件，特别适用用于金额的滚动效果
animated-number-react:使用 React 为数字设置动画的超级简单方法
08-05
动画数字React 一个简单的 React 动画数字，使用。 现场演示 用法 $ npm install animated-number-react # OR $ yarn add animated-number-react import AnimatedNumber from "animated-number-react" ; export default class App extends Component { state = { value : 150 , } ; handleChange = ( { target : { value } } ) => { this . setState ( { value } ) ; } ; formatValue = ( value ) => value . toFixed ( 2 ) ; rend
react 实现数字跳动效果
最新发布
m0_56648732的博客
05-22 215
用到了react-spring。
react数字折叠翻页效果组件
03-03
示例： <FlipNumber value={data} /> 注意： value只能传字符串类型
React项目实战（四）滚动的数字
weixin_33721427的博客
05-17 2472
上一篇React项目实战（三）尝试实现一个拉动刷新组件 需求 分析：我们要实现一个数字滚动效果，保证每个位上的数字都至少滚动一周，滚动效果是自下往上。让我们先思考一下几个细节： ① 方案的选取：css？js? ② 滚动的内容是什么？如果使用css动画用什么实现，如果使用js用什么实现？ ③ 怎么实现每个位上的数字依次停止？ 目前实现 基于background-position-y实现定位到具体数字...
react-reactsmoothscrollbar平滑滚动条的React实现
08-15
"react-smooth-scrollbar"库就是一个专门用于在React应用中实现平滑滚动条的解决方案。这个库提供了丰富的定制选项，允许开发者创建具有流畅动画效果、可自定义样式和行为的滚动条。 首先，让我们深入理解`react-...
react-full-page:使用React全屏滚动
04-28
import { FullPage , Slide } from 'react-full-page' ; export default class FullPageExample extends React . Component { render ( ) { return ( < h1> Inner slide content < / h1 > < / Slide >...
react-custom-scrollbars：React滚动条组件
02-05
React自定义滚动条 无摩擦的本机浏览器滚动移动设备的本机滚动条（在客户端和服务器上运行） 60fps的requestAnimationFrame 没有多余的样式表经过良好测试，代码覆盖率100％ ·安装npm install react-custom-...
react-基于react的自定义滚动条组件
08-14
在React开发中，有时我们可能需要对网页的默认滚动条进行自定义，以提升用户体验或者满足特定设计需求。本文将详细讲解如何基于React创建一个自定义滚动条组件，并探讨相关的关键知识点。 首先，React是一个流行的...
react 不用插件实现数字滚动的效果示例
11-20
突然要实现个数字滚动效果，网上一搜，一大堆都是用组件的。我只是想实现个简单的效果而已，决定还是自己搞搞吧。 先来看看效果吧 也不多说了，实现起来不难，但是有点细节问题需要自己好好琢磨一下 大概思路， 1.一开始为0，获取第一次数据，记录下来 2.和前一次数据进行对比 3.然后transform 4.最后收工 好了，附上代码、 export default class Number extends React.Component { constructor(props) { super(props); this.state = { prev: "000000"
react-reactscrollbarReact的滚动条组件
08-15
总的来说，`react-scrollbar`是React开发中一个强大且灵活的滚动条解决方案，它让开发者能够以编程方式控制滚动条的行为，并结合现代Web设计趋势提供更好的视觉效果和用户体验。通过深入理解和熟练使用这个库，你...
数字滚动 动画插件 countUp.js
王敬辉的博客
12-02 489
数字滚动 动画插件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-...
前端实现炫酷动感时钟特效
君_陌的博客
04-04 3196
主要用到原生态的 JS+CSS3。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ backgr...
react card效果之数字卡片
songyajun_zzuli的专栏
06-16 1386
本系列文章只是为了记录使用的插件及其他样式，依托于antd+typescript+less，不记录数据加载过程及路由指向。 简单卡片效果-01： 显示效果： tsx代码： return ( <div className="container"> <div className="dcards"> <Row> <Col span={4} className="card">
前端实现炫酷动效_html5动效系列十一：8个实用炫酷的HTML5图片动画应用
weixin_39580041的博客
12-19 753
每一个扁平化界面设计，都是我们的心灵碰撞致力于最棒的 metro ui 设计近期我们发布了不少关于HTML5和jQuery的图片动画应用，很多都比较实用，也有一些效果非常炫酷，比如一些HTML5 3D图片动画特效。本文精选了8个实用而且炫酷的HTML5图片动画应用，希望你会喜欢。1、CSS3/jQuery实现移动端滑动图片层叠效果这是一款基于jQuery和CSS3的图片层叠插件，这和我们之前介绍的...
React 中常见的动画实现方式
热门推荐
大灰狼的小绵羊哥哥的博客
01-10 1万+
现在，用户对于前端页面的要求已经不能满足于实现功能，更要有颜值，有趣味。除了整体 UI 的美观，在合适的地方添加合适的动画效果往往比静态页面更具有表现力，达到更自然的效果。比如，一个简单的 loading 动画或者页面切换效果不仅能缓解用户的等待情绪，甚至通过使用品牌 logo 等形式，默默达到品牌宣传的效果。 React 作为最近几年比较流行的前端开发框架，提出了虚拟 DOM 概念，所有
react-seamless-scroll实现无缝滚动
11-08
react-seamless-scroll是一个React组件，可以实现无缝滚动。它是基于Seamless-scroll插件开发的，可以在浏览器中支持IE、火狐浏览器、Chrome、Safari、iOS和Android等平台。使用react-seamless-scroll可以轻松地在React应用程序中实现无缝滚动效果。 使用react-seamless-scroll的步骤如下： 1. 安装react-seamless-scroll组件：npm install react-seamless-scroll --save 2. 在React组件中引入react-seamless-scroll组件：import SeamlessScroll from 'react-seamless-scroll'; 3. 在render()方法中使用SeamlessScroll组件，并传递相应的props参数，例如： <SeamlessScroll direction="horizontal" speed="50" pauseOnHover="true"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> </SeamlessScroll> 其中，direction表示滚动方向，speed表示滚动速度，pauseOnHover表示鼠标悬停时是否暂停滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值