原生js如何实现上拉加载下拉刷新？

javascriptCopy Code// 上拉加载
function handleLoadMore() {
  // 在此处编写处理上拉加载的逻辑
  // 当页面滚动到底部时，触发加载更多数据的操作
}
// 下拉刷新
function handleRefresh() {
  // 在此处编写处理下拉刷新的逻辑
  // 当用户下拉到一定程度时，触发刷新数据的操作
}
// 监听滚动事件
window.addEventListener('scroll', () => {
  const scrollHeight = document.documentElement.scrollHeight; // 页面总高度
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条距离顶部的高度
  const clientHeight = document.documentElement.clientHeight; // 可视区域高度
  if (scrollTop + clientHeight >= scrollHeight) {
    handleLoadMore(); // 到达页面底部，执行上拉加载
  }
});
// 监听触摸事件
let startY; // 记录触摸起始位置
window.addEventListener('touchstart', (e) => {
  startY = e.touches[0].pageY; // 记录触摸开始位置
});
window.addEventListener('touchmove', (e) => {
  const moveY = e.touches[0].pageY; // 当前触摸位置与起始位置的偏移量
  const distance = moveY - startY; // 移动距离
  if (distance > 0 && document.documentElement.scrollTop === 0) {
    e.preventDefault(); // 阻止页面滚动
    handleRefresh(); // 下拉到一定程度，执行下拉刷新
  }
});