原生js实现下拉刷新和上拉加载更多

标题：原生 JavaScript 实现下拉刷新和上拉加载更多

要实现下拉刷新和上拉加载更多功能，遵循以下步骤：

1. 监听 touchstart、touchmove 和 touchend 事件，记录下起始位置和滑动距离
2. 在 touchend 事件中，当滑动距离超过一定距离时，在页面顶部或底部添加加载中的提示条，并触发请求加载数据的函数
3. 在数据加载完成后，调用相应的函数更新列表
4. 当用户手指在下拉或上拉时，显示提示文本，当拖动距离不足时隐藏提示文本

下面是具体实现

实现下拉刷新

let startY, moveY, diffY // 记录滑动距离
let pullRefresh = document.querySelector('.pull-refresh') // 下拉刷新提示
let pullRefreshText = pullRefresh.querySelector('.pull-refresh-text') // 下拉刷新提示文本
let pullRefreshIcon = pullRefresh.querySelector('.pull-refresh-icon') // 下拉刷新图标

document.addEventListener('touchstart', function (e) {
  startY = e.touches[0].pageY
})

document.addEventListener('touchmove', function (e) {
  moveY = e.touches[0].pageY
  diffY = moveY - startY

  // 当用户下拉时，显示提示文本
  if (diffY > 0) {
    pullRefreshText.style.display = 'block'
    pullRefreshIcon.style.display = 'none'
    pullRefresh.style.height = diffY / 2 + 'px'
  } else {
    pullRefreshText.style.display = 'none'
  }
})

document.addEventListener('touchend', function (e) {
  // 当用户下拉并松手时，触发下拉刷新
  if (diffY > 80) {
    pullRefreshText.innerText = '正在刷新...'
    pullRefreshIcon.style.display = 'inline-block'
    pullRefresh.style.height = '50px'

    setTimeout(function () {
      // 模拟数据加载
      let data = ['新数据1', '新数据2', '新数据3']
      updateList(data)
      resetPullRefresh()
    }, 1500)
  } else {
    resetPullRefresh()
  }
})

// 重置下拉刷新提示
function resetPullRefresh () {
  pullRefreshText.innerText = '下拉可以刷新'
  pullRefreshIcon.style.display = 'inline-block'
  pullRefresh.style.height = '0px'
}

在该示例中，pull-refresh-text、pull-refresh-icon 和 pull-refresh 分别是提示文本、刷新图标和提示条的 DOM 元素， updateList 函数用来更新列表，resetPullRefresh 函数用于重置提示条的样式。

实现上拉加载更多

let loadingMore = false // 记录是否正在加载更多
let loadMore = document.querySelector('.load-more') // 上拉加载提示

window.addEventListener('scroll', function () {
  let scrollHeight = document.documentElement.scrollHeight // 获取页面总高度
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取滚动条滚动的距离
  let clientHeight = document.documentElement.clientHeight // 获取当前可视区域高度

  // 当用户滚动到页面底部时，显示提示文本并触发加载更多数据
  if (scrollTop + clientHeight >= scrollHeight && !loadingMore) {
    loadingMore = true
    loadMore.innerText = '加载中...'

    setTimeout(function () {
      // 模拟数据加载
      let data = ['更多数据1', '更多数据2', '更多数据3']
      updateList(data)
      loadingMore = false
      loadMore.innerText = '上拉加载更多'
    }, 1500)
  }
})

在该示例中， loadingMore 记录当前是否正在加载，load-more 是提示条的 DOM 元素。

以上就是原生 JavaScript 实现下拉刷新和上拉加载更多的示例代码，其中模拟数据加载部分需根据实际情况进行替换。