uniapp上下滑动刷新数据

在UniApp中，你可以使用 `scroll-view` 组件来实现上下滑动刷新数据的功能。以下是一个简单的示例代码：

<template>
  <view>
    <scroll-view
      class="scroll-view"
      scroll-y
      bindscrolltoupper="upper"
      bindscrolltolower="lower"
      refresher-enabled="{{refresherEnabled}}"
      refresher-threshold="{{refresherThreshold}}"
      refresher-default-style="{{refresherDefaultStyle}}"
      refresher-background="{{refresherBackground}}"
      bindrefresherrefresh="refresh"
    >
      <!-- 数据列表 -->
      <view class="list">
        <view class="item" wx:for="{{list}}">
          {{item}}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 列表数据
      refresherEnabled: true, // 是否开启下拉刷新
      refresherThreshold: 50, // 下拉刷新阈值
      refresherDefaultStyle: "black", // 刷新控件样式，支持 black、white，默认为黑色
      refresherBackground: "#f8f8f8" // 刷新控件背景颜色，默认为 #f8f8f8
    };
  },
  methods: {
    upper() {
      // 上滑刷新处理函数
      // 发送请求获取新数据，更新列表数据
      // 示例中使用 setTimeout 模拟异步请求
      setTimeout(() => {
        this.list = ["新数据1", "新数据2", "新数据3", ...];
      }, 1000);
    },
    lower() {
      // 下滑加载更多处理函数
      // 发送请求获取更多数据，更新列表数据
      // 示例中使用 setTimeout 模拟异步请求
      setTimeout(() => {
        this.list = [...this.list, "更多数据1", "更多数据2", "更多数据3", ...];
      }, 1000);
    },
    refresh() {
      // 刷新处理函数
      // 发送请求重新获取数据，更新列表数据
      // 示例中使用 setTimeout 模拟异步请求
      setTimeout(() => {
        this.list = ["刷新后的数据1", "刷新后的数据2", "刷新后的数据3", ...];
      }, 1000);
    }
  }
};
</script>

<style>
.scroll-view {
  height: 100vh;
}

.list {
  margin-top: 20px;
}

.item {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
</style>

在上面的示例中，我们使用了 `scroll-view` 组件来实现滚动的效果，并通过设置 `scroll-y` 属性来开启垂直滚动。通过设置 `bindscrolltoupper` 和 `bindscrolltolower` 来监听滚动到顶部和底部的事件，并触发对应的处理函数。通过设置 `refresher-enabled` 属性为 `true` 开启下拉刷新功能，并设置其他相关属性来自定义下拉刷新样式。在对应的处理函数中，你可以发送请求获取新的数据并更新列表。