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数字滚动组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • react 不用插件实现数字滚动的效果示例

    突然要实现个数字滚动效果,网上一搜,一大堆都是用组件的.我只是想实现个简单的效果而已,决定还是自己搞搞吧. 先来看看效果吧 也不多说了,实现起来不难,但是有点细节问题需要自己好好琢磨一下 大概思路, 1.一开始为0,获取第一次数据,记录下来 2.和前一次数据进行对比 3.然后transform 4.最后收工 好了,附上代码. export default class Number extends React.Component { constructor(props) { super(props

  • react实现无限循环滚动信息

    本文实例为大家分享了react实现无限循环滚动信息的具体代码,供大家参考,具体内容如下 需求 后端传递过来的数据滚动显示,鼠标移入后停止滚动,鼠标移出后继续滚动,参考公司门户的公告信息栏 实现思路 思路一 在componentDidMount中定义一个定时器,每过1000ms触发一次事件,将数组中第一条数据push到数组中,再删除掉第一条数据,最后给div添加onMouEnter和onMouseLeave事件,让鼠标移入时清除定时器,鼠标移出时重新开启定时器. 代码: class Roll ex

  • react 原生实现头像滚动播放的示例

    本文介绍了react 原生实现头像滚动播放的示例,分享给大家,具体如下: 之前需要的是下面这个效果 现在... 憋说话,先看看效果. 感觉很简单呀,直接渲染,transform就可以了,嗯嗯,是的没错. 渲染出来,获取元素,然后添加css,美中不足衔接不是很顺畅,不过还是做出来了. <div className="avatar-transform" ref={this.tmall}> {!!personAvatar.length && personAvata

  • React实现数字滚动组件numbers-scroll的示例详解

    目录 一.设计原理 二.实现方式 三.使用方式 四.参数说明 数字滚动组件,也可以叫数字轮播组件,这个名字一听就是非常普通常见的组件,第一反应就是想找找网上大佬的东西顶礼膜拜一下,这一搜,还真是没找到趁手的╮(╯▽╰)╭. 最近接了大屏的需求,数字滚动肯定是免不了的,所以开始撸袖子,造轮子了( numbers-scroll ). 首先给大家看下轮子的效果吧: 一.设计原理 如果要做到数字滚动效果,就一定要让数字有从下往上移动的感觉.如果只是纯粹的数字变化,显示出来的效果就会比较普通了,没有什么视

  • React项目使用ES6解决方案及JSX使用示例详解

    目录 不使用 ES6 绑定 JSX如何? 不使用 ES6 然而,在纯浏览器端使用ES6语法时,浏览器支持存在差异,这需要特殊处理才能正常运行. 支持ES2015桌面浏览器 Chrome:从51版开始,它可以支持ES6 97%的新功能. Firefox:53版本支持97%的ES6新功能. Safari:从版本10开始,ES6 99%的新功能都可以得到支持. IE:Edge 15可以支持96%的ES6新功能. Edge 14可以支持93%的新ES6功能.(IE7~11基本不支持ES6) class

  • Vue transx组件切换动画库示例详解

    目录 来个介绍 安装 使用 支持参数 支持事件 支持API 支持的动画类型 说明 来个介绍 先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用 <!-- 包裹动画元素 --> <trans-x :time="time" :delay=&q

  • Message组件实现发财UI 示例详解

    目录 引言 支持的功能 使用方法 实现过程 如何实现不同类型的切换? 如何实现Message的弹出和消失? 如何实现往下排列而非堆叠? 如何实现添加和移除.message-active类? 如何将隐藏的Message从DOM树中移除 如何区分不同的Message? 最后的一个小细节 引言 最近在实现Message组件,就是会从屏幕顶端弹出的一个小提醒,过一会儿就消失了.我个人非常喜欢这个设计,感觉在后续的复用性也很高,于是就打算自己手写一个作为发财UI的组件 支持的功能 目前的Message有四

  • vue3.2自定义弹窗组件结合函数式调用示例详解

    目录 前言 手写弹窗组件 组件调用 函数式调用 如何使用 含样式完整源码 效果图 前言 涉及的vue3知识点/API,createApp defineProps defineEmits <script setup> v-model <script setup> 就是 setup 语法糖 defineProps 和 props 用法差不多 defineEmits 声明可向其父组件触发的事件 手写弹窗组件 很简单的弹窗组件,支持设置标题 <script setup> def

  • Flutter滚动组件之ListView使用方法详解

    ListView ListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持基于Sliver的延迟构建模型.我们看看ListView的默认构造函数定义: ListView({   ...     //可滚动widget公共参数   Axis scrollDirection = Axis.vertical,   bool reverse = false,   ScrollController controller,   bool primary,   ScrollP

  • Ant Design 组件库按钮实现示例详解

    目录 1 antd 之 Button API 2 antd 之 Button 示例 1 antd 之 Button API antd 组件库是基于 Ant Design 设计体系的 React UI 组件库,antd 为 Web 应用提供了丰富的基础 UI 组件,可以用于研发企业级中后台产品.这篇咱们介绍 antd 组件库之 按钮. 按钮 Button 是一个比较基础的 UI 组件,一般在有交互的应用中都会用到. 其 DOM 节点为 <Button>...</Button>,ant

  • JS前端画布与组件元信息数据流示例详解

    目录 正文 拓展应用状态与静态方法 总结 正文 接下来需要解决两个问题: 可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等. runtimeProps 如何访问到当前组件实例的 props. 这两个问题非常重要,而恰好又可以通过良好的数据流设计一次性解决,接下来让我们分别分析讨论一下. 问题一:可视化搭建的其他业务元素如何与画布交互.比如拓展属性配置面板.图层列表.拖拽添加组件.定位锚点.主题等等 需要设计一个 Hooks API,可以访问

  • Vue业务组件封装Table表格示例详解

    目录 前言 Table组件介绍 Table组件封装思路 了解element Table组件代码 Table组件如何去封装 新建LTable组件 配置文件 配置插槽 动态组件 解决插槽存在的问题 代码实现 总结 前言 这个系列主要是分享自己在工作中常用到的业务组件,以及如何对这些组件进行有效的封装和封装的思路.注:都是基于element ui进行二次封装. 封装组件的基本方法就是通过props和emit进行父子组件的传值和通信.利用插槽.组件等去增加组件的可扩展性和复用性. Table组件介绍 用

  • Vue组件的继承用法示例详解

    目录 Vue组件的继承用法 Vue组件的继承用法 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜参数的需要多重的判断,这样会导致封装的组件比较繁杂,出现过多的判断,用继承可以改写基类中的方法和数据 基类案例: <template> <div class="hello"> 父类:{{name}} <span>{{title}}</sp

随机推荐