uni-app 免费的上拉加载 下拉加载的组件呢

在 uni-app 中实现免费的上拉加载和下拉加载功能，实际上可以利用框架自带的 onReachBottom 和 onPullDownRefresh 事件。这些事件结合相应的数据处理逻辑，就可以轻松实现上拉加载更多数据和下拉刷新数据的功能。以下是一个简单的代码示例，展示了如何实现这两个功能。

下拉刷新

首先，在页面的 pages.json 文件中，确保你的页面配置了 enablePullDownRefresh 属性：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    }
  ]
}

然后，在页面的 index.vue 文件中，添加 onPullDownRefresh 事件处理函数：

<template>
  <view>
    <!-- 页面内容 -->
    <view v-for="(item, index) in list" :key="index">{{ item }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟数据加载
      setTimeout(() => {
        this.list = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
        uni.stopPullDownRefresh(); // 停止下拉刷新动画
      }, 1000);
    },
    onPullDownRefresh() {
      this.list = []; // 清空列表
      this.loadData(); // 重新加载数据
    }
  }
};
</script>

上拉加载

接下来，添加 onReachBottom 事件处理函数来实现上拉加载更多数据的功能：

<script>
export default {
  // ...其他代码保持不变
  methods: {
    // ...loadData 和 onPullDownRefresh 保持不变
    onReachBottom() {
      setTimeout(() => {
        const moreData = Array.from({ length: 10 }, (_, i) => `Item ${this.list.length + i + 1}`);
        this.list = [...this.list, ...moreData]; // 追加新数据
        uni.showToast({
          title: '加载更多成功',
          icon: 'success'
        });
      }, 1000);
    }
  },
  onPageScroll() {
    // 此处可以添加滚动判断逻辑，但uni-app会自动触发onReachBottom，通常不需要手动判断
  }
};
</script>

在这个示例中，我们通过 onPullDownRefresh 事件处理下拉刷新，通过 onReachBottom 事件处理上拉加载更多数据。这两个事件结合数据加载逻辑，即可实现基本的上拉加载和下拉刷新功能。根据实际需求，你可以调整数据加载的逻辑和UI展示。