uniapp 自定义下拉刷新组件

公司要求做一个，自定义的下啦刷新，看了许许多多的百度，发现没有想要的就自己实现了一个组件，希望来改进或者更好的方法

 

1. 父组件

<template>
  <view @touchstart="start" @touchend="end" @touchmove="move" class="da">
    <!-- {{ heightCIew }} -->
    asdsad
    <shangla @jianting="jianting" :heightCIew="heightCIew" />
  </view>
</template>

<script setup lang="ts">
import shangla from '@/components/safe-scrollbox/index.vue'
import { start, end, move, heightCIew, diaoyog } from './A'
const jianting = () => {
  diaoyog()
}
</script>

<style lang="scss" scoped>
.asd {
  height: 0;
  overflow: hidden;
  width: 100%;
  background-color: salmon;
  text-align: center;
}

.da {
  padding-top: 40rpx;
  background-color: saddlebrown;
  width: 100%;
  height: 100vh;
}
</style>

• ts 文件

import { computed, ref, watch } from 'vue'
// 1、@touchstart ：触摸开始；
let startClientY = ref(0)
let encdClientY = ref(0)

export const start = (e: any) => {
  console.log(e.changedTouches[0].clientY, 'start');
  startClientY.value = e.changedTouches[0].clientY
}
// 3、@touchend：触摸结束，手指离开屏幕。
export const end = (e: Event) => {
  // console.log(e, 'end');

}
// 2、@touchmove：手指滑动的过程；
export const move = (e: any) => {
  console.log(e.changedTouches[0].clientY, 'move');
  encdClientY.value = e.changedTouches[0].clientY
}
export const heightCIew = computed(() => {
  let height = encdClientY.value - startClientY.value
  if (height < 50) {
    return 0
  }
  if (height >= 50) {
    return 50
  }
  return 0
})

// 关闭下啦刷新
export const diaoyog = () => {
  setTimeout(() => {
    encdClientY.value = 0
    startClientY.value = 0
  }, 2000)
}

• 子组件

<template>
  <view class="asd" :style="{ height: heightCIew + 'px' }">
    sdadasd
  </view>
</template>

<script setup lang="ts">
import { watch } from 'vue';

type poropType = {
  heightCIew: number
}
const { heightCIew } = defineProps<poropType>()
const $emit = defineEmits<{
  (e: 'jianting', value: void): void
}>()
watch(() => heightCIew, () => {
  $emit('jianting')

})
</script>

<style lang="scss" scoped>
.asd {
  height: 0;
  overflow: hidden;
  width: 100%;
  background-color: salmon;
  text-align: center;
  transition: all .5s;
}

.da {
  padding-top: 40rpx;
  background-color: saddlebrown;
  width: 100%;
  height: 100vh;
}
</style>