欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React實(shí)現(xiàn)數(shù)字滾動(dòng)組件numbers-scroll的示例詳解

 更新時(shí)間:2023年03月10日 14:26:49   作者:一步一個(gè)腳印一個(gè)坑  
數(shù)字滾動(dòng)組件,也可以叫數(shù)字輪播組件,這個(gè)名字一聽(tīng)就是非常普通常見(jiàn)的組件。本文將利用React實(shí)現(xiàn)這一組件,感興趣的小伙伴可以了解一下

數(shù)字滾動(dòng)組件,也可以叫數(shù)字輪播組件,這個(gè)名字一聽(tīng)就是非常普通常見(jiàn)的組件,第一反應(yīng)就是想找找網(wǎng)上大佬的東西頂禮膜拜一下,這一搜,還真是沒(méi)找到趁手的╮(╯▽╰)╭。

最近接了大屏的需求,數(shù)字滾動(dòng)肯定是免不了的,所以開始擼袖子,造輪子了( numbers-scroll )。

首先給大家看下輪子的效果吧:

一、設(shè)計(jì)原理

如果要做到數(shù)字滾動(dòng)效果,就一定要讓數(shù)字有從下往上移動(dòng)的感覺(jué)。如果只是純粹的數(shù)字變化,顯示出來(lái)的效果就會(huì)比較普通了,沒(méi)有什么視覺(jué)上的沖擊感,如圖所示:

所以,我們需要數(shù)字在變化過(guò)程中,有種紙帶往上抽的感覺(jué)。初始狀態(tài)中,數(shù)字都在顯示框下方等待。數(shù)字滾動(dòng)中,則根據(jù)數(shù)字的大小決定滾動(dòng)速度,數(shù)字越大,滾動(dòng)越快;數(shù)字越小,則滾動(dòng)越慢,這樣會(huì)有一種參差的感覺(jué),滾動(dòng)的效果也會(huì)讓人覺(jué)得更自然一些。

二、實(shí)現(xiàn)方式

初始狀態(tài)中,每個(gè)數(shù)字展示的窗口下邊都有0-9這10個(gè)數(shù)字在等待中,傳入具體數(shù)字后,每個(gè)窗口就可以開始移動(dòng)數(shù)字的位置了。

移動(dòng)數(shù)字的位置可以有三種方式:1. 通過(guò)js改變樣式(雖然邏輯更容易實(shí)現(xiàn),但是執(zhí)行效率太低,直接放棄);2. 通過(guò)animation來(lái)控制margin-top的值。3. 通過(guò)animation來(lái)控制transform的值。

雖然個(gè)人覺(jué)得通過(guò)tranform來(lái)控制顯示位置會(huì)更好些,但是目前采用的是方式二,控制margin-top的值來(lái)展示數(shù)字的位置,效果還算可以了,有興趣的同學(xué)可以改造成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. 引入數(shù)字滾動(dòng)組件的兩種示例:

// 示例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>
  }
}

四、參數(shù)說(shuō)明

為了能夠讓組件應(yīng)用在更多場(chǎng)景中,可以傳入4個(gè)參數(shù):split,value,numberStyle,containerStyle;其中numberStyle,containerStyle可以分別控制數(shù)字和容器的樣式,用戶可以隨時(shí)調(diào)整以適應(yīng)自己的場(chǎng)景。

參數(shù)名是否必須默認(rèn)值描述
splitfasle是否加上分隔符
value0顯示數(shù)字
numberStyle數(shù)字的樣式
containerStyle容器的樣式

numbers-scroll這個(gè)組件目前僅支持react,可以用于多種場(chǎng)景。

到此這篇關(guān)于React實(shí)現(xiàn)數(shù)字滾動(dòng)組件numbers-scroll的示例詳解的文章就介紹到這了,更多相關(guān)React數(shù)字滾動(dòng)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 實(shí)現(xiàn)React單頁(yè)應(yīng)用的方法詳解

    實(shí)現(xiàn)React單頁(yè)應(yīng)用的方法詳解

    今天我們來(lái)學(xué)習(xí)React是如何構(gòu)建起一個(gè)單頁(yè)應(yīng)用的,React作為目前最流行的前端框架之一,其受歡迎程度不容小覷,從這門框架上我們可以學(xué)到許多其他前端框架所缺失的東西,也是其創(chuàng)新性所在的地方,比如虛擬DOM、JSX等。下面一起來(lái)看看。
    2016-08-08
  • React?Fiber構(gòu)建源碼解析

    React?Fiber構(gòu)建源碼解析

    這篇文章主要為大家介紹了React?Fiber構(gòu)建源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • react-native?父函數(shù)組件調(diào)用類子組件的方法(實(shí)例詳解)

    react-native?父函數(shù)組件調(diào)用類子組件的方法(實(shí)例詳解)

    這篇文章主要介紹了react-native?父函數(shù)組件調(diào)用類子組件的方法,通過(guò)詳細(xì)步驟介紹了React 函數(shù)式組件之父組件調(diào)用子組件的方法,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09
  • react顯示文件上傳進(jìn)度的示例

    react顯示文件上傳進(jìn)度的示例

    這篇文章主要介紹了react顯示文件上傳進(jìn)度的示例,幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下
    2021-04-04
  • React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵

    React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵

    這篇文章主要介紹了React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解

    React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解

    這篇文章主要介紹了React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式,手動(dòng)路由的跳轉(zhuǎn),主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的,實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn),需要的朋友可以參考下
    2022-11-11
  • react入門級(jí)詳細(xì)筆記

    react入門級(jí)詳細(xì)筆記

    這篇文章講述了React的基本介紹,基本使用和React相關(guān)js庫(kù).通過(guò)這篇文章可以入門React的使用,可以快速上手使用React進(jìn)行代碼的編寫
    2021-06-06
  • 關(guān)于useEffect的第二個(gè)參數(shù)解讀

    關(guān)于useEffect的第二個(gè)參數(shù)解讀

    這篇文章主要介紹了關(guān)于useEffect的第二個(gè)參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • React中的頁(yè)面跳轉(zhuǎn)方式示例詳解

    React中的頁(yè)面跳轉(zhuǎn)方式示例詳解

    React Router提供了幾種不同的跳轉(zhuǎn)方式,包括使用組件進(jìn)行頁(yè)面跳轉(zhuǎn)、使用組件進(jìn)行重定向,以及使用編程式導(dǎo)航進(jìn)行跳轉(zhuǎn),這篇文章主要介紹了React中的頁(yè)面跳轉(zhuǎn)方式詳解,需要的朋友可以參考下
    2023-09-09
  • 每天學(xué)習(xí)一個(gè)hooks?useMount

    每天學(xué)習(xí)一個(gè)hooks?useMount

    這篇文章主要為大家介紹了每天學(xué)習(xí)一個(gè)hooks?useMount,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05

最新評(píng)論