移动端原生实现下拉刷新-----vite+ts

最新推荐文章于 2024-07-16 16:43:05 发布

制造bug的路上

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量64

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_72206625/article/details/131443739

版权

<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";

interface iDrag {
  disY: number;
  Y: number;
  viewHeight: number;
  damping: number;
  moreY: number;
  startTime: number;
  endTime: number;
}
const pull = ref<HTMLDivElement>();
const getPull = () => pull.value!;
const getHeight = () => getPull().children[0] as HTMLDivElement;
const drag: iDrag = {
  disY: 0,
  Y: 0,
  viewHeight: 0,
  damping: 0,
  moreY: 130,
  startTime: 0,
  endTime: 0,
};
const onMove = (ev: TouchEvent) => {
  drag.Y = ev.changedTouches[0].pageY - drag.disY;
  drag.damping = drag.viewHeight / drag.moreY;
  drag.Y = drag.Y / drag.damping;
  if (drag.Y >= 50) {
    getHeight().innerHTML = "释放立即刷新";
  } else {
    getHeight().innerHTML = "下拉刷新";
  }
  getHeight().style.height = drag.Y + "px";
};
const onEnd = () => {
  // document.ontouchend=null;
  // document.ontouchmove=null;
  clearTimeout(drag.startTime);
  clearTimeout(drag.endTime);
  getHeight().style.transition = `.3s ease-in height`;
  if (drag.Y >= 50) {
    drag.Y >= 50;
    getHeight().innerHTML = "加载中...";
    drag.startTime = setTimeout(() => {
      drag.Y = 0;
      getHeight().style.height = drag.Y + "px";
    }, 1400);

    drag.endTime = setTimeout(() => {
      getHeight().innerHTML = "加载完成";
    }, 1000);
  } else {
    drag.Y = 0;
  }
  getHeight().style.height = drag.Y + "px";
};
const onStart = (ev: TouchEvent) => {
  getHeight().style.transition = "none";
  drag.disY = ev.changedTouches[0].pageY - drag.Y;
  document.ontouchmove = onMove;
  document.ontouchend = onEnd;

  return false;
};
onMounted(() => {
  getPull().ontouchstart = onStart;
  drag.viewHeight = document.documentElement.clientHeight;
});
</script>


<style lang="scss" scoped>
.pull {
  ---adm-color-weak: #999;
  .pull-body {
    width: 100vw;
    min-height: 90vh;
    background-color: red;
  }
  .pull-head {
    width: 100vw;
    background-color: aqua;
    color: var(---adm-color-weak);
    font-size: 28px;
    text-align: center;
    overflow: hidden;
    height: 0;
  }
}
</style>