组件代码如下:

<template>
  <div class="pullDown" ref="pullDown">
    <div class="pullDownTop"><span v-show="showRefresh">刷新中...</span></div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">

import {ref, onMounted, watch, onUnmounted} from "vue";

const props = defineProps({
  loading: Boolean,//异步加载数据后标识是否加载完成
  noMore: Boolean//标识是否还有更多数据需要加载
})
//refresh事件标识刷新列表
//loadMore事件标识加载更多数据内容
const emits = defineEmits(['refresh', 'loadMore'])
onMounted(() => {
  getPullDown().ontouchstart = FnStart;//初始化下拉刷新
  initScroll()//初始化上滑加载
});
onUnmounted(() => {
//退出时销毁上滑加载监听的滚动事件
  window.removeEventListener('scroll', scrollListener)
})
//加载结束,隐藏UI
watch(() => props.loading, () => {
  setTimeout(() => {
    showRefresh.value = false
    y.value = 0;
    getChild(0).style.height = y.value + "px";
  }, 1000);
})
//没有更多需要加载了
watch(() => props.noMore, () => {
  if (props.noMore) {
  //销毁上滑加载监听的滚动事件
    window.removeEventListener('scroll', scrollListener)
  }
})
//标识加载提示是否显示
const showRefresh = ref(false);
//ref容器
const pullDown = ref(null);
let disY = ref<number>(0);
let y = ref<number>(0);
const getPullDown = () => {
  return pullDown.value as unknown as HTMLDivElement;
};
const getChild = (n: number) => {
  return getPullDown().children[n] as HTMLDivElement;
};
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);
  //下拉距离超过80则刷新
  if (y.value > 80) {
    //下拉
    showRefresh.value = true
    y.value = 80;
    console.log('刷新列表...')
    emits('refresh')
  } else {
    //下拉不足80或者是上滑,不触发刷新,并且隐藏提示
    showRefresh.value = false
    y.value = 0;
  }
  getChild(0).style.height = y.value + "px";
  getChild(1).ontouchmove = () => false;
  getChild(1).ontouchend = () => false;
}


const loadMore = () => {
  if (!props.noMore) {
    console.log('加载更多...')
    //触发加载更多事件
    emits('loadMore')
  }
}
//防抖函数,默认100ms
const debounce = (() => {
  let timer = 0
  return (callback: any, ms: any = 100) => {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()
const container = ref(null)
const initScroll = () => {
//初始化滑动事件监听器
  window.addEventListener('scroll', scrollListener)
}
const scrollListener = () => {
  // screen.availHeight表示屏幕高度
  // document.documentElement.scrollTop表示当前页面滚动条的位置,documentElement对应的是html标签,body对应的是body标签
  // document.compatMode用来判断当前浏览器采用的渲染方式,CSS1Compat表示标准兼容模式开启
  const scrollY = document.documentElement.scrollTop || document.body.scrollTop // 滚动条在Y轴上的滚动距离
  const vh = document.compatMode === 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight // 页面的可视高度（能看见的）
  const allHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) // 页面的总高度（所有的）
  // console.log('scrollY',scrollY + vh)
  // console.log('allHeight',allHeight - 300)
  if (scrollY + vh >= (allHeight - 300)) { // 当滚动条滑到页面底部
    debounce(loadMore)
  }
}
</script>
<style lang="scss" scoped>
.pullDown {
  .pullDownTop {
    width: 100vw;
    height: 0px;
    //background-color: skyblue;
    text-align: center;
  }

  .pullDownBottom {
    width: 100vw;
    height: 100vh;
    background-color: pink;
  }
}
</style>

使用示例:

ui部分:

    <common-list :loading="loading" :no-more="noMore" @refresh="initData" @loadMore="loadMore">
      <view class="contentBoxClass" ref="contentBox">
        <view class="card" v-for="(item, index) of dataList" :key="index">
        //unit-item是自定义的组件内容,用于根据需要实现不同的自定义内容
        //  <unit-item :unit-info="item" :index="index" @handleMaintenance="handleMaintenance"/>
        </view>
      </view>
    </common-list>

代码部分:

//第一次加载和加载更多不同,需要手动调用,初始化内容数组和数据总量
onMounted(() => {
  initData()
})


...

//分页参数,当前页码
const pageNum= ref(1)
//请求是否完成
const loading = ref(false)
//是否有更多数据需要加载
const noMore = ref(false)

//初始化函数,也可以用于刷新
const initData = async () => {
pageNum.value = 1
//根据需要传递给后台的参数
  let params = {
  ...
  }
  loading.value=true
  //请求后台接口
  let resList = await getXXXList(params)
  //后台反馈的数据放入变量中
  dataList.value = resList.content
  //设置数据总量
  total.value = resList.totalSize
  loading.value=false
}
watch(dataList, () => {
//判断是否有更多数据需要加载,如果接口没有返回数据,或者返回的数据大于等于总数则没有更多数据需要加载
  if (!dataList.value || total.value <= dataList.value.length) {
    noMore.value = true
  }
})
const loadMore = async () => {
	pageNum.value++
  let params = {
  ...
  }
  loading.value=true
  let resList = await getXXXList(params)
  //加载更多数据,和初始化数据不同,需要对数据进行追加,而不是直接覆盖
  dataList.value = dataList.value.concat(resList.ontent)
  total.value = resList.totalSize
  loading.value=false
}