uni-app 下拉分页插件

在uni-app中实现下拉分页功能，通常可以通过结合scroll-view组件和一些事件监听器来实现。以下是一个简单的代码示例，展示了如何在uni-app中实现下拉分页功能。

首先，我们需要在页面的<template>部分定义一个scroll-view组件，并设置scroll-y="true"来启用垂直滚动。同时，我们需要绑定scrolltolower事件，该事件会在滚动到底部时触发。

<template>
  <view class="container">
    <scroll-view
      scroll-y="true"
      scroll-with-animation="true"
      :scroll-top="scrollTop"
      @scrolltolower="loadMore"
      style="height: 100%;"
    >
      <view v-for="(item, index) in list" :key="index" class="item">
        {{ item }}
      </view>
      <view v-if="loading" class="loading">加载中...</view>
      <view v-if="noMoreData" class="no-more-data">没有更多数据了</view>
    </scroll-view>
  </view>
</template>

在<script>部分，我们需要定义数据列表、加载状态以及分页逻辑。

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      page: 1, // 当前页码
      loading: false, // 加载状态
      noMoreData: false, // 是否没有更多数据
      scrollTop: 0 // 滚动条位置，用于重置滚动位置
    };
  },
  methods: {
    // 加载更多数据
    async loadMore() {
      if (this.loading || this.noMoreData) return;
      this.loading = true;
      try {
        const response = await uni.request({
          url: 'https://api.example.com/data', // 替换为你的API地址
          method: 'GET',
          data: {
            page: this.page
          }
        });
        const newData = response.data.items;
        if (newData.length > 0) {
          this.list = this.list.concat(newData);
          this.page += 1;
        } else {
          this.noMoreData = true;
        }
      } catch (error) {
        console.error('加载数据失败', error);
      } finally {
        this.loading = false;
        // 重置滚动位置到顶部（可选）
        this.scrollTop = 0;
      }
    }
  },
  mounted() {
    this.loadMore(); // 初始化时加载第一页数据
  }
};
</script>

在<style>部分，我们可以添加一些基本的样式来美化我们的页面。

<style scoped>
.container {
  height: 100%;
}
.item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.loading {
  text-align: center;
  padding: 20px;
}
.no-more-data {
  text-align: center;
  padding: 20px;
  color: #999;
}
</style>

这个示例展示了如何在uni-app中实现下拉分页功能。你可以根据自己的需求进一步修改和扩展这个示例。