react+ts实现双滑块移动效果,碰撞

浮 · 白

已于 2022-03-18 09:26:05 修改

阅读量160

点赞数 1

文章标签： javascript 前端开发语言

于 2022-03-18 08:49:11 首次发布

本文链接：https://blog.csdn.net/weixin_66127892/article/details/123565637

版权

本文介绍如何利用TypeScript（TSX）在React项目中创建一个双滑块交互组件，并实现滑块之间的碰撞检测功能。通过CSS完成滑块的样式设计，为前端开发提供了一种新的交互体验。

摘要由CSDN通过智能技术生成

tsx

import { Component } from "react";
import './index.less';
 
interface Props {
 
}
interface State {
  Num: number,
  MaxNum: number,
}
 
 
class Drag extends Component<Props, State>{
  constructor(props: Props) {
    super(props);
    this.state = {
      Num: 0,
      MaxNum: 100
    }
  }
  parent?: HTMLDivElement;
  child!: HTMLCollection;
  startX: number = 0;
  ballW: number = 0;
  oW: number = 0;
  x: number = 0;
  dis: number = 0;
  Num: number = 0;
  MaxNum: number = 0;
  scale: number = 0;
  FnStart(ev: React.TouchEvent) {
    this.startX = ev.changedTouches[0].pageX - (ev.target as HTMLDivElement).offsetLeft;
    this.parent = ((ev.target as HTMLDivElement).parentNode) as HTMLDivElement;
    this.child = this.parent.children;
    this.ballW = (ev.target as HTMLDivElement).offsetWidth;
    this.oW = this.parent.offsetWidth - t