日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

react實現可播放的進度條_React

作者：何良語 ? 更新時間： 2022-05-29 編程語言

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

實現的效果圖如下：

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

功能描述：

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

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

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

4. 點擊進度條可調節進度

以下是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%;
? ? ? ? }
? ? ? }
? ? }
? }

功能實現的思想：

1. 點擊進度條可以實現進度調整

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

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) {
? ? ? // 當導航顯示時，計算整個滑塊的寬度要減去導航的寬度240px
? ? ? lineWidth = e.pageX - this.line.offsetLeft - 240;
? ? } else {
? ? ? lineWidth = e.pageX - this.line.offsetLeft;
? ? }
? ? // 將最終的滑塊寬度按百分比進行轉換
? ? const innerWidth = Math.round(lineWidth / len);
? ? this.inner.style.width = 100 / 24 * innerWidth + '%';
? }

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

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

3. 圓點可以拖拽，調整進度條進度

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

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

以上基本實現了這個功能，播放這一塊還會再加東西，后期再加入

原文鏈接：https://blog.csdn.net/sinat_39626276/article/details/81034385

欄目分類
最近更新