Element｜InfiniteScroll 无限滚动组件的具体使用方法

雨季mo浅忆

已于 2024-02-01 17:17:57 修改

阅读量5.5k

点赞数 19

分类专栏：前端 ElementUI Vue 文章标签：前端 Element Vue

于 2023-12-30 13:15:00 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/135261605

版权

本文介绍了在PC端和移动端使用Element的InfiniteScroll组件进行无限滚动加载的方法，包括v-infinite-scroll指令、infinite-scroll-disabled属性和infinite-scroll-distance属性的详细使用。同时，针对页面滚动条问题提出了解决方案，并分享了在移动端如何利用Vant List组件实现类似功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

infinite-scroll-disabled 属性

infinite-scroll-distance 属性

需求背景：

列表页面，由于数据量过多时在 IE 浏览器上面会加载异常缓慢，刚进入时页面空白无数据，导致用户体验感较差，所以需要整改优化。

这里就需要 前后端联调调整 了，

后端：需将接口由原来的传给前端的全部数据方式调整为 “分页传输” 方式，也就是前端再多传给后端两个字段值：currentPage：1，// 当前页数；pageSize：10，// 一页显示的条数（当然这里我们是由后端写死了：5，一页固定传给前端 5 条数据，所以前端此字段可以不传）

前端：进行 懒加载 处理，也就是需借助 Element｜InfiniteScroll 无限滚动 组件来实现一个下拉至列表底部时，向后端请求下一页的数据用于拼接至列表数组后再次展示新的内容。【 PC 端】

接下来就让我们来了解 & 如何使用吧：（可参考组件的 禁用加载 示例）

前端：懒加载，移动端 需借助 Vant 2 ｜List 列表组件｜基础用法来实现一个下拉至列表底部时，向后端请求下一页的数据用于拼接至列表数组。

PC 端：

InfiniteScroll 无限滚动

滚动至底部时，加载更多数据。

在前端开发中，很多页面都需要实现无限滚动的效果，即当页面滚动到底部时，自动加载更多的数据。Element Infinitescroll 是一款方便易用的 Vue 组件，可以帮助我们快速实现无限滚动功能。

基本用法

Element Infinitescroll 提供了一个 v-infinite-scroll 指令，可以直接在需要无限滚动的元素上使用。

<template>
  <div>
    <DefaultReport
      v-if="dataList.length > 0"
      :dataList.sync="dataList"
      :loading.sync="loading"
      :noMore="noMore"
      @getDataList="getDataList"
    />
  </div>
</template>

<script>
import DefaultReport from './component/DefaultReport';
import { getStData } from '@api/listApi.js';

export default {
  components: { DefaultReport },
  data() {
    return {
      loading: false, // 列表加载中...
      noMore: false, // 没有更多了
      dataList: [], // 页面数据
      setFormData: {
        surveyId: '',
        currentPage: 1, // 当前页数
      },
    };
  },
  computed: {
    rqObj() {
      return this.$route.query || {};
    },
  },
  created() {
    if (this.rqObj.id && this.rqObj.id !== null) {
      this.setFormData.surveyId = this.rqObj.id;
      this.getDataList(this.setFormData);
    }
  },
  methods: {
    async getDataList(data) {
      let res = await getStData(data);
      const { code, result } = res;
      if (code === '0') {
        if (result.lists && result.lists.length > 0) {
          this.dataList = this.dataList.concat(result.lists);
        }
        this.loading = false;
        // 加载完成后需要将loading设置为false，以便下次触发加载
      } else {
        // 没有更多数据了（需停止继续加载）
        this.loading = false;
        this.noMore = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>