uniapp中实现上拉加载下拉刷新

在uniapp中，可以使用`uni-scroll-view`组件实现上拉加载和下拉刷新。

1. 首先，在页面中引入`uni-scroll-view`组件。

<template>
  <uni-scroll-view ref="scroll-view" class="scroll-view" :scroll-with-animation="true" @scrolltolower="loadMore" @scrolltoupper="refresh">
    <!--内容区-->
  </uni-scroll-view>
</template>

2. 在`script`中定义`loadMore`和`refresh`方法。

<script>
export default {
  methods: {
    // 加载更多
    loadMore() {
      // TODO: 加载更多的逻辑
    },
    // 下拉刷新
    refresh() {
      // TODO: 下拉刷新的逻辑
    }
  }
}
</script>

3. 在`loadMore`方法中，可以通过调用`uni.request`方法向后端请求更多数据，并将新数据追加到原有数据的末尾。同时，可以设置一个`loading`变量，在数据请求完成之前显示一个加载提示。

// 加载更多
loadMore() {
  // 如果正在加载数据，则返回
  if (this.loading) return
  // 显示加载提示
  this.loading = true
  uni.request({
    url: 'https://xxx.com/api/list',
    data: {
      page: this.page + 1
    },
    success: res => {
      // 将新数据追加到原有数据的末尾
      this.list = this.list.concat(res.data.list)
      // 更新页码
      this.page++
      // 隐藏加载提示
      this.loading = false
    },
    fail: res => {
      // 隐藏加载提示
      this.loading = false
    }
  })
}

4. 在`refresh`方法中，可以通过调用`uni.request`方法重新请求数据，并将新数据覆盖原有数据。同时，可以设置一个`refreshing`变量，在数据请求完成之前显示一个刷新提示。

// 下拉刷新
refresh() {
  // 如果正在刷新，则返回
  if (this.refreshing) return
  // 显示刷新提示
  this.refreshing = true
  uni.request({
    url: 'https://xxx.com/api/list',
    data: {
      page: 1
    },
    success: res => {
      // 将新数据覆盖原有数据
      this.list = res.data.list
      // 更新页码
      this.page = 1
      // 隐藏刷新提示
      this.refreshing = false
    },
    fail: res => {
      // 隐藏刷新提示
      this.refreshing = false
    }
  })
}

5. 最后，可以通过`uni-loading`组件和`uni-load-more`组件分别实现加载提示和加载更多提示。

<template>
  <uni-scroll-view ref="scroll-view" class="scroll-view" :scroll-with-animation="true" @scrolltolower="loadMore" @scrolltoupper="refresh">
    <!--内容区-->
    <uni-load-more :show="loading">
      加载中...
    </uni-load-more>
  </uni-scroll-view>
  <uni-loading :show="refreshing" mode="pulling">
    正在刷新...
  </uni-loading>
</template>

这样，就可以在uniapp中实现上拉加载和下拉刷新了。