React + 移动端 = 下拉刷新（带文字）

小程的坏习惯

于 2022-06-27 17:29:53 发布

阅读量260

点赞数 1

分类专栏：原生React.js js 文章标签：大数据

本文链接：https://blog.csdn.net/weixin_68903201/article/details/125488352

版权

本文介绍了如何在React移动端应用中实现下拉刷新功能，详细讲解了使用tsx和less进行组件开发的过程。

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

一、tsx

import React, { Component, createRef } from 'react'
import "./index.less"

export default class Tuos extends Component {
    pullDown = createRef<HTMLDivElement>()
    do = () => this.pullDown.current as HTMLDivElement;
    downText = createRef<HTMLDivElement>()
    to = () => this.downText.current as HTMLDivElement;
    disy: number = 0
    y: number = 0

    componentDidMount() {
        this.do().ontouchstart = this.fns.bind(this)
    }
    fns(e: TouchEvent) {
        this.disy = e.changedTouches[0].pageY;
        document.ontouchmove = this.move.bind(this)
        document.ontouchend = this.end.bind(this)
        this.do().style.transition = "none";

    }
    move(e: TouchEvent) {
        this.y = e.changedTouches[0].pageY - this.disy
        this.do().style.top = (this.y / 4) + 'px'
    }
    end() {
        if (this.do().offsetTop > 50)