react實現(xiàn)可播放的進度條

更新時間：2022年03月28日 07:41:56 作者：何良語

這篇文章主要為大家詳細介紹了react實現(xiàn)可播放的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了react實現(xiàn)可播放進度條的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)的效果圖如下：

如果所示，點擊播放按鈕可以播放，進度條表示進度

功能描述：

1. 點擊播放按鈕可以播放，進度條表示進度

2. 點擊暫停，進度條停止變化

3. 可點擊圓點，進行進度拖拽

4. 點擊進度條可調(diào)節(jié)進度

以下是render部分代碼：

<div className="play" ref={play => { this.play = play; }}>
? ? ? ? ? <span className="palyButton" onClick={this.handlePlay}><Icon type="caret-right" style={{ display: this.state.autoPlay ? 'none' : 'inline-block' }} /><Icon type="pause" style={{ display: this.state.autoPlay ? 'inline-block' : 'none' }} /></span>
? ? ? ? ? <span className="lineWrap" onMouseMove={this.handleMouseMove} onMouseUp={this.handleMouseUp} onMouseLeave={this.handleMouseUp} onClick={this.clcikLine} ref={line => { this.line = line; }}>
? ? ? ? ? ? <span className="lineInner" ref={inner => { this.inner = inner; }}>
? ? ? ? ? ? ? <span className="lineDot" onMouseDown={this.handleMouseDown} ref={dot => { this.dot = dot; }} />
? ? ? ? ? ? </span>
? ? ? ? ? </span>
</div>

定義一個最大的div來包裹播放按鈕和進度條：

播放按鈕是兩個antd的icon，通過state中的autoPlay來控制顯示哪一個icon

進度條的中定義一個外span，是進度條的總長度，在這個span里定義一個span，是中間的滑塊，再定義一個span是可拖拽的圓點

以下是這部分的css樣式代碼，只要小圓點使用的絕對定位：

.play{
? ? width: 100%;
? ? height: 30%;
? ? padding: 0 40px;
? ? margin-top: 15px;
? ? .palyButton{
? ? ? margin-right: 22px;
? ? ? cursor: pointer;
? ? ? color: #1DDD92;
? ? ? font-size: 20px;
? ? ? i:last-child{
? ? ? ? font-weight: bold;
? ? ? }
? ? }
? ? .lineWrap{
? ? ? width: 95%;
? ? ? height: 14px;
? ? ? background-color: #2A2F4D;
? ? ? display: inline-block;
? ? ? cursor: pointer;
? ? ? .lineInner{
? ? ? ? width: 10%;
? ? ? ? height: 100%;
? ? ? ? display: inline-block;
? ? ? ? background-color: #1DDD92;
? ? ? ? position: relative;
? ? ? ? .lineDot{
? ? ? ? ? position: absolute;
? ? ? ? ? top: -3px;
? ? ? ? ? right: -10px;
? ? ? ? ? width: 20px;
? ? ? ? ? height: 20px;
? ? ? ? ? display: inline-block;
? ? ? ? ? background-color: #1DDD92;
? ? ? ? ? border: 1px solid #fff;
? ? ? ? ? border-radius: 50%;
? ? ? ? }
? ? ? }
? ? }
? }

功能實現(xiàn)的思想：

1. 點擊進度條可以實現(xiàn)進度調(diào)整

原理：點擊進度條獲取點擊事件的pageX屬性，然后通過減去進度條左邊的margin來計算點擊的進度條的位置，因為整個頁面的左邊有一個tab切換，這個tab切換可以被隱藏，所以整個進度條的寬度是不定的，所以進度條的滑塊要使用百分比來實現(xiàn)，保證在進度條總寬度變化時滑塊的寬度按比例變化：

clcikLine = e => {
? ? const len = this.line.clientWidth / 24;
? ? // 將整個進度條分為24份
? ? const windowWidth = window.innerWidth - this.line.clientWidth - this.line.offsetLeft - 20;
? ? let lineWidth;
? ? if (windowWidth > 240) {
? ? ? // 當(dāng)導(dǎo)航顯示時，計算整個滑塊的寬度要減去導(dǎo)航的寬度240px
? ? ? lineWidth = e.pageX - this.line.offsetLeft - 240;
? ? } else {
? ? ? lineWidth = e.pageX - this.line.offsetLeft;
? ? }
? ? // 將最終的滑塊寬度按百分比進行轉(zhuǎn)換
? ? const innerWidth = Math.round(lineWidth / len);
? ? this.inner.style.width = 100 / 24 * innerWidth + '%';
? }

2. 點擊播放，進度增加，點擊暫停，進度停止

handlePlay = () => {
? ? // 設(shè)置播放按鈕
? ? this.setState({
? ? ? autoPlay: !this.state.autoPlay,
? ? });
? ? // 清楚定時器
? ? clearInterval(this.timer);
?
? ? setTimeout(() => {
? ? ? if (this.state.autoPlay) {
? ? ? ? const wrapWidth = this.line.clientWidth;
? ? ? ? const innerWidth = this.inner.clientWidth;
? ? ? ? if (innerWidth < wrapWidth) {
? ? ? ? ? this.timer = setInterval(() => {
? ? ? ? ? ? // 設(shè)置定時器，每1000毫秒執(zhí)行一次，每1000毫秒滑塊長度增加進度條的1%長度
? ? ? ? ? ? this.inner.style.width = Math.round(this.inner.clientWidth / this.line.clientWidth * 100) + 1 + '%';
? ? ? ? ? ? // 每次獲得的增加的百分比長度都進行四舍五入
? ? ? ? ? ? if (this.inner.clientWidth >= this.line.clientWidth) {
? ? ? ? ? ? ? // 當(dāng)滑塊的長度大于等于進度條的長度時，清楚定時器，并且關(guān)閉播放按鈕
? ? ? ? ? ? ? clearInterval(this.timer);
? ? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? autoPlay: false
? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? }, 1000);
? ? ? ? } else {
? ? ? ? ? // 當(dāng)滑塊寬度大于進度條寬度時，點擊播放按鈕，延時1000毫秒自動關(guān)閉播放按鈕
? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? autoPlay: false
? ? ? ? ? ? });
? ? ? ? ? }, 1000);
? ? ? ? }
? ? ? }
? ? }, 20);
? }

3. 圓點可以拖拽，調(diào)整進度條進度

這個功能中，使用了四個事件，分別是：onMouseMove、onMouseUp、onMouseLeave放在進度條上，onMouseDown放在可拖拽的圓點上。

handleMouseDown = e => {
? ? // 鼠標(biāo)按下時打開可拖功能
? ? this.setState({
? ? ? drag: true,
? ? });
? }
?
? handleMouseMove = e => {
? ? // 當(dāng)可拖拽功能打開時
? ? if (this.state.drag) {
? ? ? // 滑塊寬度小于進度條寬度或大于0時
? ? ? if (this.inner.clientWidth <= this.line.clientWidth || this.inner.clientWidth <= 0) {
? ? ? ? // 將進度條分為200份
? ? ? ? const len = this.line.clientWidth / 200;
? ? ? ? // 判斷導(dǎo)航是否隱藏
? ? ? ? const windowWidth = window.innerWidth - this.line.clientWidth - this.line.offsetLeft - 20;
? ? ? ? let lineWidth;
? ? ? ? if (windowWidth > 240) {
? ? ? ? ? // 導(dǎo)航未隱藏
? ? ? ? ? lineWidth = e.pageX - this.line.offsetLeft - 240;
? ? ? ? } else {
? ? ? ? ? // 導(dǎo)航隱藏
? ? ? ? ? lineWidth = e.pageX - this.line.offsetLeft;
? ? ? ? }
? ? ? ? const innerWidth = Math.round(lineWidth / len);
? ? ? ? // 滑塊寬度每次增加或減少0.5%的寬度
? ? ? ? this.inner.style.width = 0.5 * innerWidth + '%';
? ? ? }
? ? }
? }
?
? handleMouseUp = e => {
? ? // 當(dāng)鼠標(biāo)放開或者離開進度條時關(guān)閉拖拽功能
? ? this.setState({
? ? ? drag: false,
? ? });
? }

以上基本實現(xiàn)了這個功能，播放這一塊還會再加?xùn)|西，后期再加入

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: