Vue PC端项目 scroll 触底加载分页节流

Lililiming_

已于 2023-02-23 10:20:14 修改

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-02-21 14:06:30 首次发布

本文链接：https://blog.youkuaiyun.com/Lililiming_/article/details/129140930

本文介绍了如何使用Vue2在PC端项目中实现滚动触底加载更多功能，结合分页和节流优化，以搜索页为例，详细讲解了html结构、data初始化、methods中的处理逻辑、created钩子中的调用以及如何节流监听并移除scroll事件。

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

用Vue2做PC端项目，由于列表页的展示过多，但element-ui的分页组件产品嫌弃丑，提出需求要实现滚动分页触底加载更多，同时对滚动事件也进行了节流处理：

效果：

以搜索页为例

1、html中的结构：

   <div class="cate_list" v-loading="loading" @scroll="scrollFn">
        <div
          class="cate_item"
          v-for="item in keyWordsCoursesList"
          :key="item.id"
        >
          <el-card
            :body-style="{ padding: '0rem' }"
            style="width: 17.8125rem; height: 17.8125rem"
          >
            <div style="wi