APP开发-Vue3+vant实现数据列表下拉分页功能

一、需求分析

1、数据列表页面初始化显示十条数据，当用户下拉页面的时候会再自动请求十条数据，如果数据加载完成，显示提示信息’已经到底了’

二、 分页效果图

从动图中我们可以看出页面在下拉的时候会自动触发数据请求，在右边的Network栏中，我们可以监测它是往后台发送请求的，而其currentPage代表的请求页数每次也会自动加一。

前台需要的数据格式，其中dataCount代表我们所查询出来的数据总量，逻辑判断分页就是要根据dataCount来判断。productList也就是我们分页查询出来的数据list

三、后台分页逻辑

当我们数据列表数据量大的时候，我们一般都会采用分页的展示。怎么样实现分页？首先，前台我们要告诉后台，我们需要请求第几页数据，并且把每页展示的数据量告诉我。
后台处理就比较简单了，因为是使用mysql的数据库，所以可以直接使用limit关键字进行分页。

SELECT * from table limit currentPage, pageSize

mysql分页比较简单，其中currentPage代表起始查询的下标， pageSize代表查询的数据量

SELECT * from table limit 10,  10

上个sql语句表示我要查询从下标10开始，往后的10条数据。

四、前台分页逻辑

缕清楚我们后台的分页逻辑，当我们前台请求接口的时候也会清楚该如何传递参数。前台使用vant组件，此组件也提供了分页的组件van-list，根据这个组件的介绍我们可以了解到List组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将finished 设置成 true 即可。

vant官网：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/list

五、分页共通组件的提取

因为我们分页的机能在很多地方都要用到，所以首先我们要把van-list这个可以分页的组件提为共通组件，此共通组件的主要目的是：触发下拉请求数据操作，当后台数据请求完毕后则显示加载完成。此共通组件在初始化的时候会往父组件发射一个事件，父组件要接受这个事件并且实现页面初始化请求的API。API请求完成以后再次回调这个分页组件，让分页组件去进行判断数据是否请求完毕。
html代码：

<template>
  <div v-if="noData">
    <div>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        @load="onLoad"
      >
        <!-- 加载显示 -->
        <template #loading>
          <img :src="require('@/assets/img/loading/u431.svg')" style="width:30px"/>
          <div>正在加