uniapp 在组件里面如何实现上拉刷新下拉加载

在uniapp中，可以使用内置的组件`<scroll-view>`来实现上拉刷新和下拉加载。具体步骤如下：

1. 在`<scroll-view>`标签中添加`@scrolltolower`事件和`@scrolltoupper`事件，分别表示滚动到底部和顶部时触发的事件。

2. 在事件处理函数中，可以调用相应的方法来实现上拉刷新和下拉加载。

例如，可以使用`uni.request()`方法发送请求获取数据，然后将数据添加到页面的数据列表中，最后调用`uni.stopPullDownRefresh()`方法停止下拉刷新动画。

示例代码如下：

<template>
  <scroll-view class="list" :style="{height:height+'px'}" scroll-y @scrolltolower="loadMore" @scrolltoupper="refresh">
    <ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      page: 1, // 当前页数
      limit: 10, // 每页数据条数
      height: 0 // scroll-view的高度
    }
  },
  mounted() {
    // 获取 scroll-view 的高度
    uni.getSystemInfo({
      success: res => {
        this.height = res.windowHeight
      }
    })
    
    // 页面初始化时加载数据
    this.loadData()
  },
  methods: {
    // 加载数据
    loadData() {
      uni.request({
        url: 'https://xxx.com/api/list',
        data: {
          page: this.page,
          limit: this.limit
        },
        success: res => {
          this.list = this.list.concat(res.data)
        }
      })
    },
    // 下拉刷新
    refresh() {
      this.page = 1
      this.list = []
      this.loadData()
      uni.stopPullDownRefresh()
    },
    // 上拉加载更多
    loadMore() {
      this.page++
      this.loadData()
    }
  }
}
</script>