一个简单的移动端下拉刷新

估计大家也不想看我废话 直接上代码：

<template>
    <div class="pull" ref="pull">
        <div class="pull-head">
            下拉刷新
        </div>
        <div class="pull-body"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 获取滑动的盒子
const pull = ref<HTMLDivElement>()
// 断言  滑动的盒子
const getPull = () => pull.value!
// 断言刷新盒子
const getHeight = () => getPull().children[0] as HTMLDivElement
// 定义类型
interface iDrag {
    disY: number,
    Y: number,
    viewHeight: number,
    damping: number,
    moveY: number
}
// 定义用到的数据
const drag: iDrag = {
    // 手指的初始位置
    disY: 0,
    // 手指移动的距离  && 即上方显示刷新盒子的高度
    Y: 0,
    // 可视区高度
    viewHeight: 0,
    // 阻尼值
    damping: 0,
    // 最大移动距离
    moveY: 130
}
// 手指开始触摸
const onStart = (e: TouchEvent) => {
    // 获取手指在屏幕中的位置
    drag.disY = e.changedTouches[0].pageY - drag.Y;
//绑定正在触摸事件 和 触摸结束事件
    document.ontouchmove = onMove;
    document.ontouchend = onEnd;
    // 阻止默认事件
    return false;
}
// 手指滑动时
const onMove = (e: TouchEvent) => {
    // 获取手指正在移动的距离
    drag.Y = e.changedTouches[0].pageY - drag.disY
    // 获取阻尼值 = 可视区高度/最大移动距离
    drag.damping = drag.viewHeight / drag.moveY
    // 出现盒子的滑动距离就是 它的高度/阻尼值
    drag.Y = drag.Y / drag.damping
//判断盒子是否到达想要的高度

    if (drag.Y >= 60) {
        getHeight().innerHTML = '释放立即刷新'
    } else {
        getHeight().innerHTML = '下拉刷新'
    }
    // 将计算好的高度赋值给盒子
    getHeight().style.height = drag.Y + 'px'
    
}

// 手指滑动结束  解绑事件
const onEnd = () => {
    if (drag.Y > 0 && drag.Y < 60) {
        getHeight().style.height = 0 + 'px'
        getHeight().style.transition = 'height 1s'
    }
    // 如果下拉到了想要的高度 暂时固定在那个位置  且更改文本内容
    if (drag.Y > 60) {
        getHeight().style.height = 60 + 'px'
        getHeight().innerHTML = '正在刷新，请稍后...'

        // 使用定时器模拟请求数据  一定时间后让盒子回弹
        setTimeout(() => {
            getHeight().innerHTML = '刷新完成'
            // 让刷新成功显示1s在回弹
            setTimeout(() => {
                getHeight().style.transition = 'height 1s'
                getHeight().style.height = 0 + 'px'
            }, 1000)
        }, 2000)
    }
    console.log(drag.Y, 9999999);
    // 解绑事件
    document.ontouchmove = null;
    document.ontouchend = null
}
onMounted(() => {
    getPull().ontouchstart = onStart;
    // 获取可视区高度
    drag.viewHeight = document.documentElement.clientHeight
    getHeight().ontransitionend = () => {
        // 清空动画效果
        getHeight().style.transition = ``
    }

})
</script>

<style lang="scss" scoped>
.pull {


    .pull-head {
        width: 100vw;
        background-color: aqua;
        text-align: center;
        font-size: 28px;
        overflow: hidden;
        height: 0;
        // transform: translateY(-60);
        // transition: all 3s;
    }

    .pull-body {
        width: 100vw;
        min-height: 50vh;
        background-color: aquamarine;

    }
}
</style>