react-hook和vue3.0 实现下拉刷新

vue3.0

tsx：

  <template>
    <div class="refresh" ref="refresh">
      <div class="pull" ref="pull">
        <div class="pull-son">{{ txt }}</div>
      </div>
      <div class="box"></div>
    </div>
  </template>
  <script lang="ts" setup>
  import { onMounted, ref } from "vue";
  let y: number = 0;
  let dy: number = 0;
  let txt = ref<string>("下拉刷新");
  let refresh = ref<HTMLDivElement |null>(null);
  let pull = ref<HTMLDivElement | null>(null);
  const getrefresh = () => refresh.value as HTMLDivElement;
  const getpull = () => pull.value as HTMLDivElement;
  onMounted(() => {
    getrefresh().ontouchstart = fnstart;
  });
  const fnstart = (ev: TouchEvent) => {
    getpull().style.transition = "";
    dy = ev.changedTouches[0].pageY;
    document.ontouchmove = fnmove;
    document.ontouchend = fnend;
  };
  const fnmove = (ev: TouchEvent) => {
    getpull().style.height = y / 3 + "px";
    y = ev.changedTouches[0].pageY - dy;
    if (y > 200) {
      txt.value = "释放立即刷新";
    } else {
      txt.value = "下拉加载";
    }
  };
  const fnend = () => {
    getpull().style.transition = ".3s all";
    if (y > 60) {
      y = 60;
      txt.value = "正在加载";
      setTimeout(() => {
        txt.value = "加载成功";
        setTimeout(() => {
          y = 0;
          getpull().style.height = y + "px";
        }, 500);
      }, 2000);
    } else {
      y = 0;
    }
    getpull().style.height = y + "px";
  };
  </script>

  <style lang="less" scoped>
  @import "./index.less";
  </style>

less：

.refresh {
    touch-action: none;
}

.refresh {
    width: 100vw;

    .pull {
        position: relative;

        .pull-son {
            width: 380px;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 40px;
            height: 0;
        }
    }

    .box {
        width: 100vw;
        height: 100vh;
        background-color: pink;
    }
}
body{
    margin: 0px;
}

react -hook

import React,{ useRef, useState } from 'react'
import './index.less';

export default function Index() {
    let [txt, settxt] = useState<string>('下拉刷新')
    let refresh = useRef<HTMLDivElement | null>(null);
    const getrefresh = () => refresh.current as HTMLDivElement;
    const getpull = () => getrefresh().children[0] as HTMLDivElement;
    let y: number = 0;
    let dy: number = 0;
    const fnstart = (e: React.TouchEvent) => {
        getpull().style.transition = '';
        dy = e.changedTouches[0].pageY;
        document.ontouchmove = fnmove;
        document.ontouchend = fnend;
    }
    const fnmove = (e: TouchEvent) => {
        y = e.changedTouches[0].pageY - dy;
        getpull().style.height = y / 3 + 'px';
        if (y === 200) {
            settxt('释放立即刷新')
        } else {
            settxt('下拉刷新')
        }
        
    }
    const fnend = () => {
        getpull().style.transition = '.3s all';
        if (y > 60) {
            y = 60;
            settxt('正在加载...')
            setTimeout(() => {
                settxt('刷新成功')
                setTimeout(() => {
                    y = 0;
                    getpull().style.height = y + 'px';
                }, 500)
            }, 2000)
        } else {
            y = 0
        }
        getpull().style.height = y + 'px';
    }
    return (
        <div className="refresh" ref={refresh} onTouchStart={fnstart}>
            <div className="pull">
                <div className="pull-son">
                    {txt}
                </div>
            </div>
            <div className="box"></div>
        </div>
    )
}

less 

.refresh {
    touch-action: none;
}

.refresh {
    width: 100vw;

    .pull {
        position: relative;

        .pull-son {
            width: 380px;
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 40px;
            height: 0;
        }
    }

    .box {
        width: 100vw;
        height: 100vh;
        background-color: pink;
    }
}
body{
    margin: 0px;
}