React實現(xiàn)數(shù)字滾動組件numbers-scroll的示例詳解
數(shù)字滾動組件,也可以叫數(shù)字輪播組件,這個名字一聽就是非常普通常見的組件,第一反應(yīng)就是想找找網(wǎng)上大佬的東西頂禮膜拜一下,這一搜,還真是沒找到趁手的╮(╯▽╰)╭。
最近接了大屏的需求,數(shù)字滾動肯定是免不了的,所以開始擼袖子,造輪子了( numbers-scroll )。
首先給大家看下輪子的效果吧:
一、設(shè)計原理
如果要做到數(shù)字滾動效果,就一定要讓數(shù)字有從下往上移動的感覺。如果只是純粹的數(shù)字變化,顯示出來的效果就會比較普通了,沒有什么視覺上的沖擊感,如圖所示:
所以,我們需要數(shù)字在變化過程中,有種紙帶往上抽的感覺。初始狀態(tài)中,數(shù)字都在顯示框下方等待。數(shù)字滾動中,則根據(jù)數(shù)字的大小決定滾動速度,數(shù)字越大,滾動越快;數(shù)字越小,則滾動越慢,這樣會有一種參差的感覺,滾動的效果也會讓人覺得更自然一些。
二、實現(xiàn)方式
初始狀態(tài)中,每個數(shù)字展示的窗口下邊都有0-9這10個數(shù)字在等待中,傳入具體數(shù)字后,每個窗口就可以開始移動數(shù)字的位置了。
移動數(shù)字的位置可以有三種方式:1. 通過js改變樣式(雖然邏輯更容易實現(xiàn),但是執(zhí)行效率太低,直接放棄);2. 通過animation來控制margin-top的值。3. 通過animation來控制transform的值。
雖然個人覺得通過tranform來控制顯示位置會更好些,但是目前采用的是方式二,控制margin-top的值來展示數(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ù)字滾動組件的兩種示例:
// 示例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ù)說明
為了能夠讓組件應(yīng)用在更多場景中,可以傳入4個參數(shù):split,value,numberStyle,containerStyle;其中numberStyle,containerStyle可以分別控制數(shù)字和容器的樣式,用戶可以隨時調(diào)整以適應(yīng)自己的場景。
參數(shù)名 | 是否必須 | 默認(rèn)值 | 描述 |
split | 否 | fasle | 是否加上分隔符 |
value | 是 | 0 | 顯示數(shù)字 |
numberStyle | 否 | 數(shù)字的樣式 | |
containerStyle | 否 | 容器的樣式 |
numbers-scroll這個組件目前僅支持react,可以用于多種場景。
到此這篇關(guān)于React實現(xiàn)數(shù)字滾動組件numbers-scroll的示例詳解的文章就介紹到這了,更多相關(guān)React數(shù)字滾動組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react-native?父函數(shù)組件調(diào)用類子組件的方法(實例詳解)
這篇文章主要介紹了react-native?父函數(shù)組件調(diào)用類子組件的方法,通過詳細(xì)步驟介紹了React 函數(shù)式組件之父組件調(diào)用子組件的方法,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式詳解
這篇文章主要介紹了React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式,手動路由的跳轉(zhuǎn),主要是通過Link或者NavLink進(jìn)行跳轉(zhuǎn)的,實際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn),需要的朋友可以參考下2022-11-11關(guān)于useEffect的第二個參數(shù)解讀
這篇文章主要介紹了關(guān)于useEffect的第二個參數(shù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09