uniapp上拉加载下拉刷新

在uniapp中，可以使用 `uni-app` 组件库提供的 `uni-scroll-view` 组件来实现上拉加载和下拉刷新功能。

下拉刷新：

1. 在 `template` 中添加 `uni-scroll-view` 组件，并设置 `refresher-enabled` 属性为 `true`，表示开启下拉刷新功能。

<template>
  <uni-scroll-view refresher-enabled @scrolltolower="loadMore">
    <!-- 列表数据 -->
  </uni-scroll-view>
</template>

2. 在 `methods` 中实现下拉刷新触发的函数。

methods: {
  onRefresh() {
    // 执行下拉刷新操作
    // 更新列表数据
    // 停止下拉刷新
    uni.stopPullDownRefresh();
  }
}

3. 通过 `onPullDownRefresh` 生命周期钩子，在下拉刷新的时候触发 `onRefresh` 函数。

methods: {
  onRefresh() {
    // 执行下拉刷新操作
    // 更新列表数据
    // 停止下拉刷新
    uni.stopPullDownRefresh();
  }
},
onPullDownRefresh() {
  this.onRefresh();
}

上拉加载：

1. 在 `template` 中添加 `uni-scroll-view` 组件，并设置 `scroll-into-view` 属性为 `scroll-view-anchor`，表示在滚动到指定锚点时触发上拉加载。

<template>
  <uni-scroll-view scroll-into-view="scroll-view-anchor" @scrolltolower="loadMore">
    <!-- 列表数据 -->
    <view id="scroll-view-anchor"></view>
  </uni-scroll-view>
</template>

2. 在 `methods` 中实现上拉加载触发的函数。

methods: {
  loadMore() {
    // 执行上拉加载操作
    // 更新列表数据
  }
}

3. 在 `template` 中添加一个锚点元素，用来触发上拉加载。

<template>
  <uni-scroll-view scroll-into-view="scroll-view-anchor" @scrolltolower="loadMore">
    <!-- 列表数据 -->
    <view id="scroll-view-anchor"></view>
  </uni-scroll-view>
</template>