vue + vant 实现前端分页

前言

        相信后端的朋友，对于分页都已经很熟悉了，就是将数据从数据库中一页一页地取出，按需加载，降低服务器的压力。通常来说，一个应用，后端的功能都是为了服务于前端的展示。后端有分页功能，那么前端肯定也是有分页需求的。比如我们每天使用的，QQ，微信，加载聊天记录或者联系人列表时都是通过分页来实现的。大家每天都会使用的电商平台更不用说了，京东，淘宝加载商品时，都是通过分页来实现的。前端分页主要是为了降低浏览器的压力，试想，如果京东淘宝这种大平台，一下子将数据库中的所有商品加载出来，前端页面根本就加载不出来。所以我们平时和浏览电商平台时，总是会看到加载中试样。

        今天就来说说前端的分页怎么实现。我本人也是主学后端的，最近对前端感兴趣，所以将前端也学了一下，然后在做项目过程中，遇到了分页需求，竟无从下手，当时对使用的组件库vant也还不熟悉，在网上找教程也都是elemen-plus实现的，而且还是PC端应用，移动端的文章就更少了，经过一顿摸索后，也终于实现了前端分页。

技术

        首先说明一下，这里实现的是移动端的分页，使用的是vue + vant 组件库。

代码

        前端实现分页，可以通过vant组件库中lis组件，贴上官网，不迷路：

Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

使用步骤：

引入组件：

import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);

html代码：

  <van-list
      v-if="roleList"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getMoreRole"
      :offset="10"
      :immediate-check="false"
    >
      <template #default>
        // 这是一个专门显示角色信息的组件，这是使用了插槽自定义列表显示
        <role-list-page v-model="roleList"></role-list-page>
      </template>
  </van-list>

finished-text 设置的是所有数据加载完之后显示给用户的内容，可以自定义。

标签中的 offset 属性设置的是当滚动条滚动到距离底部多少时开始加载下一页，我这里设置的是距离底部10时开始加载下一页数据，你可以根据自己的情况来自己设定，如果不希望用户看到加载更多的提示，那么久将此值设置大一点，如果希望用户看到加载更多的提示那么就将此值设置小一点即可，具体设置多少可以自己试着来。

immediate-check 设置的是是否立即在初始化时执行检查是否加载更多，建议设置为false，默认为true，设置为true时，如果在你的应用中已经设置了一进页面就加载数据（onMounted），那么会产生冲突，建议设置为false，设置为false后只会根据你设置的加载时机来加载更多数据。

更多的注释都在js代码中，可以边看代码边看注释。

js代码：

// 当滚动到与屏幕距离小于offset时自动设置为true，
// 需要在重新加载完数据后设置为false，表示数据加载完毕
const loading = ref(false) 
const roleList = ref([])
// 这是总得数据是否加载完毕的标志，如果所有数据都加载完，需要设置为true
const finished = ref(false)
const getMoreRole = async () => {
  // 加载下一页数据，需要将页码加一
  roleTagsSearchParams.value.current++
  const res = await roleSearchService(roleTagsSearchParams.value)
  // 以下三行为自己踩坑过程中打的日志，或许只有webStorm（我自己的前端编辑器）才知道
  // 我看了多少次控制台，因为他打了多少次我看了多少次
  console.log('res', res.data.data.records)
  console.log('roleList：', roleList.value)
  console.log('roleList.value.length', roleList.value.length)
  // 将获取到的数据添加到roleList中
  if (res.data.code === 0) {
    roleList.value.push(...res.data.data.records)
    console.log('roleList：', roleList.value)
    // 当数据加载操作完成后，将loading设置为false
    loading.value = false
  } else {
    // 加载失败后给用户提示，用户点击提示信息后，会自动重新加载
    err.value = true
  }
  // 如果已加载的数据大于或者等于总数据长度，那么将finished设置为true，不再进行加载
  if (roleList.value.length >= res.data.data.total) {
    finished.value = true
  }
}

注意：loading 值为true，表示需要加载更多的数据，loading为false，表示数据已经加载完或者不需要加载更多的数据。每次成功加载完数据后，需要手动将loading设置false，但是需要加载数据时不需要手动设置loading为true，组件自动设置。

好了，以上就是前端 vue + vant 组件库实现 分页的全部代码，怎么样，学会了吗，学会了就点个赞呗！