vue3+ts 实现下拉刷新

最新推荐文章于 2024-03-01 11:37:56 发布

减肥到70公斤，戒烟戒酒戒色减肥中

最新推荐文章于 2024-03-01 11:37:56 发布

阅读量276

点赞数 1

文章标签：数学建模 vue.js typescript 性能优化

本文链接：https://blog.csdn.net/weixin_47821983/article/details/130990909

版权

import { defineStore } from 'pinia'

import { onMounted, ref } from 'vue'

//pull.ts

export const usePullStore = defineStore('pull', () => {

    const positions = {
        disY: 0,
        Y: 0,
        height: 0,
        scale: 0,
        startTime:0,
        endTime:0,
    };

    const pull = ref<HTMLDivElement>();
    const pullTop=ref<HTMLDivElement>();

    const FnMove = (ev: TouchEvent) => {
        positions.Y = ev.changedTouches[0].pageY - positions.disY;

        positions.scale = positions.height / 150;

        positions.Y=positions.Y / positions.scale;

        if(positions.Y>80){
            pullTop.value!.innerHTML='释放立即刷新'
        }else{
            pullTop.value!.innerHTML='下拉刷新'    
        }



        pullTop.value!.style.height=positions.Y  + 'px';


    };

    const FnEnd=()=>{
        clearTimeout(positions.startTime);
        clearTimeout(positions.endTime);
        pullTop.value!.style.transition=`.3s ease-in height`;

        if(positions.Y>=80){
            positions.Y=60;

            pullTop.value!.innerHTML='加载中...'    

            positions.startTime=setTimeout(()=>{
                positions.Y=0;

                pullTop.value!.style.height=positions.Y+'px';
            },1400);

            positions.endTime=setTimeout(()=>{
                pullTop.value!.innerHTML='加载完成' 
            },1000);

        }else{
            positions.Y=0;
        }

        pullTop.value!.style.height=positions.Y  + 'px';
    }
    const FnStart = (ev: TouchEvent) => {
        pullTop.value!.style.transition='none';
        positions.disY = ev.changedTouches[0].pageY - positions.Y

        document.ontouchmove = FnMove;
        
        document.ontouchend=FnEnd;

        ev.preventDefault && ev.preventDefault();
    }

    onMounted(() => {
        pull.value!.ontouchstart = FnStart;

        positions.height = document.documentElement.clientHeight;
    })


    return {
        pull,
        pullTop
    }
});

pull.vue

<template>
    <div class="pull" ref="pull">
        <div class="pull-top" ref="pullTop"></div>
        <div class="pull-box"></div>
    </div>
</template>

<script setup lang="ts">
import {usePullStore} from '@/store'
import { storeToRefs } from 'pinia';

const PullStore=usePullStore();

const {pull,pullTop}=storeToRefs(PullStore)
</script>

<style scoped lang="less">
.pull{
    width:100vw;
    .pull-top{
        width:100vw;
        background:salmon;
        overflow: hidden;
        text-align:center;
        color:#fff;
    }
    .pull-box{
        width:100vw;
        height:100vh;
        background:skyblue;
    }
}
</style>