v u e 3.0写下拉刷新

先要下载vue3.0,

在views里新建vue项目

先看效果图：

这是没上拉之前：

这是上拉了之后：

然后复制下面的代码：

<template>
    <div class="pulldown" ref="pulldown">
        <div class="pulldown-top"></div>
        <div class="pulldown-bottom"></div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
const pulldown = ref(null);
let disy = ref<number>(0);
let y = ref<number>(0);
// let disy = ref<number>(0)
const getPulldown = () => {
    return pulldown.value as unknown as HTMLDivElement;
};
const getChild = (n: number) => {
    return getPulldown().children[n] as HTMLDivElement;
};
onMounted(() => {
    getPulldown().ontouchstart = FnStart;
});
const FnStart = function (ev: TouchEvent) {
        getChild(0).style.transition = `null`
    disy.value = ev.changedTouches[0].pageY - y.value;
    getChild(1).ontouchmove = FnMove;
    getChild(1).ontouchend = FnEnd;
};
const FnMove = function (ev: TouchEvent) {
    y.value = ev.changedTouches[0].pageY - disy.value;
    getChild(0).style.height = y.value / 3 + "px";
};
const FnEnd = function (ev: TouchEvent) {
        getChild(0).style.transition = `0.4s ease height`


    console.log(y.value);
    if (y.value > 80) {
        y.value = 80;
        setTimeout(() => {
            y.value = 0;
            getChild(0).style.height = y.value + "px";
        }, 1000);
    } else {
        y.value = 0;
    }
    getChild(0).style.height = y.value + "px";
    getChild(1).ontouchmove = () => false;
    getChild(1).ontouchend = () => false;
};
</script>
<style lang="less" scoped>
.pulldown {
    .pulldown-top {
        width: 100vw;
        height: 0px;
        background-color: skyblue;
    }
    .pulldown-bottom {
        width: 100vw;
        height: 100vh;
        background-color:pink;
    }
}
</style>

记住写路由！