uniapp上拉加载下拉刷新

Uniapp提供了`uni-scroll-view`组件来实现下拉刷新和上拉加载更多功能。

首先，在页面中使用`uni-scroll-view`组件，设置其`@scrolltolower`事件来监听滚动到底部的事件，然后在事件处理函数中执行加载更多数据的操作。代码示例如下：

<template>
  <view>
    <uni-scroll-view :enable-back-to-top="true" @scrolltolower="loadMore">
      <!-- 渲染数据列表 -->
      <view v-for="(item, index) in list" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      page: 1, // 当前页码
      pageSize: 10, // 每页数据条数
      isLoading: false // 是否正在加载
    };
  },
  methods: {
    // 加载更多数据
    loadMore() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        this.list = this.list.concat(this.generateData(this.page, this.pageSize));
        this.page++;
        this.isLoading = false;
      }, 1000);
    },
    // 生成数据
    generateData(page, pageSize) {
      const start = (page - 1) * pageSize;
      const end = page * pageSize;
      return Array.from({ length: pageSize }, (_, i) => `Item ${start + i + 1}`);
    }
  }
};
</script>

然后，在`uni-scroll-view`组件上设置`enable-refresh`属性为`true`，设置`@refresh`事件来监听下拉刷新的事件，然后在事件处理函数中执行刷新数据的操作。代码示例如下：

<template>
  <view>
    <uni-scroll-view :enable-back-to-top="true" :enable-refresh="true" @scrolltolower="loadMore" @refresh="refresh">
      <!-- 渲染数据列表 -->
      <view v-for="(item, index) in list" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      page: 1, // 当前页码
      pageSize: 10, // 每页数据条数
      isLoading: false // 是否正在加载
    };
  },
  methods: {
    // 加载更多数据
    loadMore() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        this.list = this.list.concat(this.generateData(this.page, this.pageSize));
        this.page++;
        this.isLoading = false;
      }, 1000);
    },
    // 刷新数据
    refresh() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        this.list = this.generateData(1, this.pageSize);
        this.page = 2;
        this.isLoading = false;
      }, 1000);
    },
    // 生成数据
    generateData(page, pageSize) {
      const start = (page - 1) * pageSize;
      const end = page * pageSize;
      return Array.from({ length: pageSize }, (_, i) => `Item ${start + i + 1}`);
    }
  }
};
</script>

以上就是使用`uni-scroll-view`组件实现下拉刷新和上拉加载更多功能的示例代码。