封装一个 uniapp 上拉加载，下拉刷新组件

你可以封装一个uniapp的上拉加载和下拉刷新组件，以下是一个简单的示例代码：

<template>
  <view>
    <!-- 下拉刷新 -->
    <scroll-view class="refresh" scroll-y="true" refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh">
      <refresher-slot>
        <!-- 自定义下拉刷新内容 -->
        <view class="refresh-text">{{refreshText}}</view>
      </refresher-slot>
      <view>
        <!-- 列表内容 -->
        <block v-for="(item, index) in list" :key="index">
          <view class="list-item">{{item}}</view>
        </block>
        <!-- 加载更多 -->
        <view class="load-more" v-show="!loading && !noMoreData" bindtap="loadMore">加载更多</view>
        <!-- 加载中 -->
        <view class="loading" v-show="loading">加载中...</view>
        <!-- 没有更多数据 -->
        <view class="no-more" v-show="noMoreData">没有更多数据了</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      refreshing: false, // 是否正在下拉刷新
      refreshText: "下拉刷新", // 下拉刷新文本
      list: [], // 列表数据
      loading: false, // 是否正在加载更多
      noMoreData: false // 是否没有更多数据
    };
  },
  methods: {
    // 下拉刷新事件
    onRefresh() {
      this.refreshing = true;
      this.refreshText = "正在刷新...";
      
      // 模拟刷新数据
      setTimeout(() => {
        this.list = [1, 2, 3, 4, 5];
        this.refreshing = false;
        this.refreshText = "下拉刷新";
        this.loading = false;
        this.noMoreData = false;
      }, 1000);
    },
    // 加载更多事件
    loadMore() {
      this.loading = true;
      
      // 模拟加载更多数据
      setTimeout(() => {
        if (this.list.length >= 10) {
          // 数据加载完成，没有更多数据
          this.loading = false;
          this.noMoreData = true;
        } else {
          // 追加数据
          this.list.push(this.list.length + 1);
          this.loading = false;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="scss">
.refresh {
  height: 100vh;
}

.refresh-text {
  text-align: center;
  line-height: 80rpx;
}

.list-item {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
}

.load-more,
.loading,
.no-more {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
</style>

这个组件使用了`scroll-view`作为容器，通过设置`scroll-y`为`true`开启垂直滚动。下拉刷新通过监听`bindrefresherrefresh`事件，当下拉刷新触发时，执行`onRefresh`方法。加载更多通过点击"加载更多"按钮触发`loadMore`方法。

你可以根据自己的需求进行样式和功能的修改。希望对你有帮助！