uni-app 上拉加载数据，实现分页的不二法门

2024-02-01 11:44:06

一、分页的必要性

在移动端开发中，为了提升用户体验和页面性能，分页是一种非常常见的技术。因为移动端设备的屏幕尺寸有限，如果一次加载所有数据，不仅会造成页面加载缓慢，还会对用户造成视觉上的压力。而分页可以将数据分成多个部分，逐页加载，这样就可以避免这些问题，让用户在滚动浏览页面时，能够更加流畅、舒适。

二、uni-app 实现分页

uni-app 作为一款跨平台开发框架，提供了非常丰富的 API，其中就包括用于实现分页的 API。下面，我们就一起来学习如何在 uni-app 中实现分页。

1. 准备工作

在开始之前，我们需要先确保已经安装了 uni-app 开发环境。如果没有安装，可以参考官方文档进行安装。此外，还需要准备一个 uni-app 项目，如果没有，可以新建一个项目。

2. 创建页面

在 uni-app 项目中，我们需要创建一个页面来展示分页数据。我们可以通过在 src 目录下新建一个 .vue 文件来创建页面。例如，我们可以创建一个名为 "list.vue" 的页面。

3. 添加组件

在 list.vue 页面中，我们需要添加一个列表组件来展示数据。我们可以使用 uni-app 提供的 <list> 组件。

<template>
  <view>
    <list :data="list" :loading="loading" @load="loadMore">
      <template #default="{ item }">
        <view>{{ item.name }}</view>
      </template>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      size: 10,
    }
  },
  methods: {
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        this.list = this.list.concat(Array.from({ length: this.size }, (_, i) => ({ name: `item ${this.page * this.size + i + 1}` })));
        this.page++;
        this.loading = false;
      }, 1000);
    },
  },
};
</script>