uniapp下拉刷新加载数据

在 UniApp 中，可以使用下拉刷新组件来实现下拉刷新加载数据的功能。

首先，在你的页面中添加一个 `<uni-scroll-view>` 组件，用于包裹需要下拉刷新的内容。然后，给 `<uni-scroll-view>` 添加 `@scrolltoupper` 事件监听器，当触发下拉刷新时会执行相应的方法。

接下来，你可以在 `data` 中定义一个变量来表示是否正在加载数据，比如 `isLoading`。当开始下拉刷新时，将 `isLoading` 设置为 `true`，并执行加载数据的逻辑。加载完成后，将 `isLoading` 设置为 `false`。

下面是一个简单的示例代码：

<template>
  <view>
    <uni-scroll-view :upper-threshold="50" @scrolltoupper="onPullDownRefresh">
      <!-- 下拉刷新内容 -->
      <view v-if="isLoading">正在加载...</view>
      <view v-else>
        <!-- 展示数据 -->
        <view v-for="item in dataList" :key="item.id">{{ item.name }}</view>
      </view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      dataList: []
    };
  },
  methods: {
    onPullDownRefresh() {
      if (this.isLoading) {
        // 正在加载中，不重复请求
        return;
      }
      this.isLoading = true;
      
      // 执行数据加载逻辑，比如调用接口获取数据
      
      // 模拟异步加载
      setTimeout(() => {
        this.dataList = [
          { id: 1, name: '数据1' },
          { id: 2, name: '数据2' },
          { id: 3, name: '数据3' }
        ];
        this.isLoading = false;
      }, 2000);
    }
  }
};
</script>

在上述代码中，`<uni-scroll-view>` 组件包裹了需要下拉刷新的内容，当触发 `@scrolltoupper` 事件时会执行 `onPullDownRefresh` 方法。在 `onPullDownRefresh` 方法中，你可以执行加载数据的逻辑，比如调用接口获取数据，并将加载状态控制变量 `isLoading` 设置为 `true`，加载完成后再设置为 `false`。

注意：上述示例代码中的数据加载逻辑只是一个简单的模拟，实际使用时你需要根据你的需求进行相应的修改。同时，你也可以根据需要对下拉刷新的样式进行自定义。