原生 JS 如何实现上拉加载下拉刷新?

在原生应用中，实现上拉加载和下拉刷新可以通过以下几个步骤：

1. 引入相关库或框架：你可以使用一些开源库或框架，如SwipeRefreshLayout、RecyclerView等，它们提供了方便的功能来实现下拉刷新和上拉加载。

2. 设置下拉刷新：根据你使用的库或框架的文档，你需要在你的布局文件中添加下拉刷新组件，并在相应的代码中设置下拉刷新的监听器。一般来说，你需要实现一个回调方法，在这个方法中执行刷新相关的操作，比如请求新数据。

3. 设置上拉加载：同样，根据使用的库或框架的文档，你需要在你的布局文件中添加列表显示的组件，并在相应的代码中设置上拉加载的监听器。在监听器中，一般需要监听列表滚动事件，当滚动到底部时触发加载更多数据的操作。

4. 加载数据：在下拉刷新和上拉加载的回调方法中，你需要编写代码来请求数据并更新你的列表UI。具体的实现方式会依赖于你使用的网络请求库和数据处理逻辑。

// 获取DOM元素
const listElement = document.getElementById('list');
const refreshTextElement = document.getElementById('refreshText');
const loadTextElement = document.getElementById('loadText');

// 上拉刷新相关参数
let startY = 0;  // 触摸起始位置
let currentY = 0;  // 当前位置
let isRefreshing = false;  // 标记是否正在刷新

// 下拉加载相关参数
let isLoading = false;  // 标记是否正在加载
let loadThreshold = 50;  // 触发加载的阈值

// 监听上拉刷新
listElement.addEventListener('touchstart', function (e) {
  startY = e.touches[0].clientY;
});

listElement.addEventListener('touchmove', function (e) {
  if (isRefreshing) return;  // 如果已经在刷新，则不处理滑动事件

  currentY = e.touches[0].clientY;
  
  // 判断是否向下滑动，并且滑动距离达到刷新阈值
  if (currentY - startY > refreshThreshold) {
    refreshTextElement.innerText = '释放刷新';
  } else {
    refreshTextElement.innerText = '下拉刷新';
  }
});

listElement.addEventListener('touchend', function () {
  if (isRefreshing) return;

  if (currentY - startY > refreshThreshold) {
    refreshTextElement.innerText = '刷新中...';
    isRefreshing = true;

    // 执行刷新动作，比如发送请求获取最新数据
    // ...

    // 刷新完成后重置状态
    setTimeout(function () {
      refreshTextElement.innerText = '下拉刷新';
      isRefreshing = false;
    }, 1500);
  }
});

// 监听下拉加载
window.addEventListener('scroll', function() {
  if (isLoading) return;  // 如果正在加载，则不处理滚动事件

  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  // 判断滚动到底部，并且滚动距离达到加载阈值
  if (scrollHeight - scrollTop - clientHeight < loadThreshold) {
    loadTextElement.innerText = '加载中...';
    isLoading = true;

    // 执行加载动作，比如发送请求获取更多数据
    // ...
    
    // 加载完成后重置状态
    setTimeout(function () {
      loadTextElement.innerText = '上拉加载更多';
      isLoading = false;
    }, 1500);
  }
});

在上述示例中，我们根据触摸事件和滚动事件实现了上拉刷新和下拉加载的逻辑。当用户向下滑动页面时，通过判断滑动距离和阈值来显示相应的提示，触发刷新或加载动作。在实际的刷新和加载动作中，你可以根据需求发送请求获取数据或执行其他操作，示例中使用了一个简单的定时器来模拟异步操作。

示例中的 HTML 代码中需要有 id 为 “list” 的列表元素以及用于显示刷新和加载状态的元素（比如 id 为 “refreshText” 和 “loadText” 的元素）。你需要根据你的实际情况进行适当的修改。

总的来说，实现上拉加载和下拉刷新的关键在于使用合适的库或框架，并在相应的回调方法中执行加载数据的操作。这样，用户就可以通过上拉和下拉的手势来触发相关操作，从而实现流畅的数据加载和刷新效果。