react 可拖拽进度条的实现

2024-11-29 11:12:22

效果

/*
 * @Author: hongbin
 * @Date: 2022-04-16 13:26:39
 * @LastEditors: hongbin
 * @LastEditTime: 2022-04-16 21:00:02
 * @Description:拖动进度条组件
 */

import { FC, ReactElement, useRef } from "react";
import styled from "styled-components";
import { flexCenter } from "../../styled";

interface IProps {
  /**
   * 0-1
   */
  value: number;
  /**
   * callback 0-1
   */
  onChange: (percent: number) => void;
}

const ProgressBar: FC<IProps> = ({ value, onChange }): ReactElement => {
  const totalRef = useRef<HTMLDivElement>(null);

  return (
    <Container>
      <div ref={totalRef}>
        <div style={{ width: value * 100 + "%" }} />
      </div>
      <div
        onMouseDown={(e) => {
          const { offsetWidth } = totalRef.current!;
          const stop = e.currentTarget;
          const { offsetLeft } = stop;
          stop.style["left"] = offsetLeft + "px";
          const { pageX: start } = e;
          const move = (e: MouseEvent) => {
            let val = offsetLeft + e.pageX - start;
            if (val <= 0) val = 0;
            if (val >= offsetWidth) val = offsetWidth;
            // stop.style["left"] = val + "px";
            onChange(val / offsetWidth);
          };

          const clear = () => {
            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", clear);
            document.removeEventListener("mouseleave", clear);
          };
          document.addEventListener("mousemove", move);
          document.addEventListener("mouseup", clear);
          document.addEventListener("mouseleave", clear);
        }}
        style={{ left: value * 100 + "%" }}
      ></div>
    </Container>
  );
};

export default ProgressBar;

const Container = styled.div`
  position: relative;
  width: 10vw;
  height: 1vw;
  ${flexCenter};
  & > :first-child {
    width: inherit;
    height: 0.5vw;
    background-color: var(--tint-color);
    border-radius: 10vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0.05vw;
    div {
      width: 5vw;
      height: 0.4vw;
      background-color: var(--deep-color);
      border-radius: 0.4vw;
    }
  }
  & > :last-child {
    width: 1vw;
    height: 1vw;
    background-color: var(--deep-color);
    border-radius: 1vw;
    position: absolute;
    cursor: pointer;
    transform: translateX(-0.5vw);
    svg {
      width: 0.9vw;
    }
  }
`;

export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

:root {
  --deep-color: #978961;
  --tint-color: #efe5d4;
}

到此这篇关于react 可拖拽进度条的实现的文章就介绍到这了,更多相关react 可拖拽进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

react-player实现视频播放与自定义进度条效果

环境 react.js ant design pro 4.0 实现效果代码 import React from 'react' import { PageHeaderWrapper } from '@ant-design/pro-layout'; import { Col ,Row,Button,Form,Input,Card,Slider,Select,message} from 'antd'; import {CaretRightOutlined,PauseOutlined } fro
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学
react实现可播放的进度条

本文实例为大家分享了react实现可播放进度条的具体代码,供大家参考,具体内容如下实现的效果图如下: 如果所示,点击播放按钮可以播放,进度条表示进度功能描述: 1. 点击播放按钮可以播放,进度条表示进度 2. 点击暂停,进度条停止变化 3. 可点击圆点,进行进度拖拽 4. 点击进度条可调节进度以下是render部分代码: <div className="play" ref={play => { this.play = play; }}> &l
react-native 圆弧拖动进度条实现的示例代码

本文介绍了react-native 圆弧拖动进度条实现的示例代码,分享给大家,具体如下: 先上效果图因为需求需要实现这个效果图非原生实现, 难点1:绘制使用svg 难点2:点击事件的处理难点3:封装由于绘制需要是使用svg 此处自行百度按照svg以及api 教学视图代码块 render() { return ( <View pointerEvents={'box-only'} //事件处理 {...this._panResponder.panHandlers}> //实际圆环 {
React Native实现进度条弹框的示例代码

本文介绍了React Native实现进度条弹框,分享给大家我们在上传或者下载文件时候,希望有一个进度条弹框去提醒用户取当前正在上传或者下载,也允许用去取点击取消上传或者下载. 首先实现进度条. import React, { PureComponent } from 'react'; import { StyleSheet, View, Animated, Easing, } from 'react-native'; class Bar extends PureComponent { con
react 可拖拽进度条的实现

效果 /* * @Author: hongbin * @Date: 2022-04-16 13:26:39 * @LastEditors: hongbin * @LastEditTime: 2022-04-16 21:00:02 * @Description:拖动进度条组件 */ import { FC, ReactElement, useRef } from "react"; import styled from "styled-components"; impo
vue实现拖拽进度条

本文实例为大家分享了vue实现拖拽进度条的具体代码,供大家参考,具体内容如下组件代码: <template> <div> <div class="slider" ref="slider"> <div class="process" :style="{ width }"></div> <div class="thunk" ref="
JS实现拖拽进度条改变元素透明度

今天要分享的是运用原生JS拖拽进度条改变元素透明度,效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS拖拽进度条改变元素透明度</title> <style> #pa
vue开发拖拽进度条滑动组件

分享一个最近写的进度条滑动组件,以前都是用jq写,学会了vue,尝试着拿vue来写觉得非常简单,代码复用性很强! 效果图如下: 调用组件如下: <slider :min=0 :max=100 v-model = "per"></slider> <template> <div class="slider" ref="slider"> <div class="process"
小程序视频或音频自定义可拖拽进度条的示例代码

小程序原生组件的音频播放时并没有进度条的显示,而此次项目中,鉴于原生的视频进度条样式太丑,产品要求做一个可拖拽的进度条满足需求. 视频和音频提供的api大致是相似的,可以根据以下代码修改为与音频相关的进度条. wxml的结构如下: <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法

本文实例讲述了jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法.分享给大家供大家参考.具体如下: 左右拖拽切换对比图片效果,运行效果后,图片中间有个拖动条,拖动左右滑动,可看到图片不一样的效果,女模特的脸变嫩了,呵呵,其实是用了两张背景图片实现的,这就需要jquery.beforeafter.js插件了,拖动时候的小图标不见了,路径可以在jquery.beforeafter.js中设置,不多说了. 运行效果截图如下: 在线演示地址如下: http://d
React 实现拖拽功能的示例代码

本文介绍了React 实现拖拽功能的示例代码,分享给大家,具体如下: 实现效果: 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感觉有点麻烦,而且没必要.感觉相关的博文好少的,大部分都是直接上代码,没有解释. 图片默认可以拖动,其他元素的拖动效果同图片.正常的 div 是不能被拖动的,鼠标点击选择后移动没有效果,需要加 draggable="true" 使得元素可以被拖动. 拖拽相关的几个事件,有被拖动元素的事件,也有拖动进入的
react实现拖拽模态框

前言实际开发中,模态框展现数据会经常出现.但不幸的是有时功能开发完了,UI同学突然提出需求希望模态框能拖拽.本文使用的模态框由 ant design 3.0 的 Modal 组件封装而成,如何在不修改原来代码的基础上实现拖拽呢.最终效果图如下: 实践 1.创建高阶组件DragHoc 新建文件ModalDrag/index.js,将下面代码copy进去 DragObj是具体拖拽的原生js代码,后面再看 DragHoc是创建高阶组件的函数,其中参数InnerComponent是需要被改造的模态框组
js实现横向拖拽导航条功能

效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/cs
JavaScript实现可拖拽的进度条

本文实例为大家分享了JavaScript实现可拖拽的进度条的具体代码,供大家参考,具体内容如下一.进度条实现 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">

react 可拖拽进度条的实现

相关推荐

随机推荐