uniapp使用Vue3上拉加载下拉刷新

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

首先，在页面中引入uni-scroll-view组件：

<template>
  <uni-scroll-view class="scroll-view" :enable-back-to-top="true" :scroll-y="true" :lower-threshold="20" :upper-threshold="20" :refresher-enabled="true" :refresher-threshold="45" :refresher-default-style="true" @scrolltolower="loadMoreData" @refresherrefresh="refreshData">
    <!-- 内容区域 -->
  </uni-scroll-view>
</template>

其中，`:scroll-y="true"`表示支持纵向滚动，`:lower-threshold="20"`表示距离底部多少距离时触发上拉加载，`:upper-threshold="20"`表示距离顶部多少距离时触发下拉刷新，`:refresher-enabled="true"`表示启用下拉刷新功能，`:refresher-threshold="45"`表示下拉刷新的临界值，`:refresher-default-style="true"`表示使用默认的下拉刷新样式。

在`<uni-scroll-view>`标签中的内容区域，可以放置展示数据的列表或其他组件。

然后，在页面的script中，编写下拉刷新和上拉加载的方法：

<script>
export default {
  data() {
    return {
      dataList: [], // 数据列表
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      isLoadMore: false, // 是否正在加载更多数据
      isRefresh: false // 是否正在下拉刷新
    }
  },
  methods: {
    // 加载更多数据
    loadMoreData() {
      if (this.isLoadMore) {
        return
      }
      this.isLoadMore = true
      this.page++
      // 调用加载数据的接口获取数据
      // 将获取到的数据添加到dataList中
      // 加载完成后，将isLoadMore设为false
    },
    // 下拉刷新数据
    refreshData() {
      if (this.isRefresh) {
        return
      }
      this.isRefresh = true
      this.page = 1
      // 调用加载数据的接口获取数据
      // 将获取到的数据替换dataList中的数据
      // 刷新完成后，将isRefresh设为false
    }
  }
}
</script>

在loadMoreData方法中，首先判断是否正在加载更多数据，如果是，则不再执行加载数据的操作。然后将isLoadMore设为true，表示正在加载更多数据。接着，调用加载数据的接口获取数据，并将获取到的数据添加到dataList中。最后，将isLoadMore设为false，表示加载完成。

在refreshData方法中，同样需要判断是否正在下拉刷新。然后将isRefresh设为true，表示正在刷新数据。接着，将页码设为1，表示刷新第一页数据。调用加载数据的接口获取数据，并将获取到的数据替换dataList中的数据。最后，将isRefresh设为false，表示刷新完成。

这样就实现了基于Vue3的UniApp上拉加载和下拉刷新功能。