typescript(TS)下拉带loading效果

首先准备好一个ts的项目

创建pulldown文件夹目录如下：

dist文件夹不用理会

看我们的pulldown文件代码：

import { Component, createRef } from "react";
import "./pulldown.less"

interface Props {

}
interface User {
    id: string,
    text: string
}
interface State {
    Lists: User[]
}
class Pulldown extends Component<Props, State> {
    RefreshBox = createRef<HTMLDivElement>()
    Load = createRef<HTMLDivElement>()
    Refresh?: HTMLDivElement
    Loading?: HTMLDivElement
    StartY: number = 0
    DisY: number = 0
    x: number = 0
    clientHeights: number = 0
    scale: number = 0
    endY: number = 0
    Distance: number = 0
    timer: NodeJS.Timeout | null = null
    constructor(props: Props) {
        super(props)
        this.state = {
            Lists: [
                { id: "a1", text: "一一一" },
                { id: "a2", text: "一一一" },
                { id: "a3", text: "一一一" },
                { id: "a4", text: "一一一" },
                { id: "a5", text: "一一一" },
                { id: "a6", text: "一一一" },
                { id: "a7", text: "一一一" },
                { id: "a8", text: "一一一" },
                { id: "a9", text: "一一一" },
                { id: "a10", text: "一一一" },
                { id: "a11", text: "一一一" },
                { id: "a12", text: "一一一" },
                { id: "a13", text: "一一一" },
                { id: "a14", text: "一一一" },
                { id: "a15", text: "一一一" },
            ]
        }

    }
    componentDidMount() {


        this.Refresh = this.RefreshBox.c