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

用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="width: 17.8125rem; height: 11.25rem">
              <a :href="item.path">
                <img :src="item.coverUrl" alt="" width="100%" height="100%"/>
              </a>
            </div>
            <div style="padding: 14px">
              <span
                style="
                  font-size: 1rem;
                  color: #000;
                  display: block;
                  width: 16.25rem;
                  height: 3rem;
                  line-height: 1.5rem;
                "
                >{
   
   { item.content }}</span
              >
              <div class="bottom clearfix cate_text">
                <el-tag
                  v-if="item.type === 2"
                  color="#3C6CFE"
                  style="
                    color: #fff;
                    width: 2.5rem;
                    height: 1.25rem;
                    padding: 0 0.375rem 0 0.375rem;
                    font-size: 0.875rem;
                    line-height: 1.25rem;
                  "
                  >图文</el-tag
                >
                <el-tag
                  v-if="item.type === 1"
                  color="orange"
                  style="
                    color: #fff;
                    width: 2.5rem;
                    height: 1.25rem;
                    padding: 0 0.375rem 0 0.375rem;
                    font-size: 0.875rem;
                    line-height: 1.25rem;
                  "
                  >视频</el-tag
                >
                <span
                  style="
                    font-size: 0.875rem;
                    color: rgba(0, 0, 0, 0.85);
                    line: height 1.75rem;
                    float: right;
                  "
                  ><span>{
   
   { item.readNum }}</span
                  >人累计学习</span
                >
              </div>
            </div>
          </el-card>
        </div>
      </div>
     <div v-if="!noMore">
        <el-button
          v-show="isLoding"
          type="text"
          style="display: flex; margin: 0 auto; color: #000"
          ><i class="el-icon-loading"></i
        ></el-button>
         <el-button
          type="text"
          v-show="finishLoding"
          style="display: flex; margin: 0 auto; color: #000"
          >已经没有更多啦~</el-button
        >
      </div>

2、js  data中的初始值

data() {
    return {
      noMore: false, // 搜索结果无的展示
      keyWordsCoursesList: [], // 关键词返回的全部课程
      currentPage: 1, // 当前页
      pageSize: 12, // 一页12条
      total: '',
      loading: true, // 组件loading的展示
      isLoding: true, // 加载中，loading图标
      finishLoding: false // 加载完成，显示已经没有更多了
    };
  },

3、method方法中：

 methods: {
    // 关键词搜索
    fetchCoursesList() {
      this.loading = true
      this.isLoding = true
      allCoursesList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.$route.query.keywords
      }).then((res) => {
        if (res.data.code === 0) {
          this.loading = false
          this.keyWordsCoursesList = [...res.data.data.rows]
          this.total = res.data.data.total
          if (this.keyWordsCoursesList.length === 0) {
            this.noMore = true;
          }
        }
      });
    },
    // 滚动触底加载
    scrollFn() {
      let clientHeight = document.documentElement.clientHeight - 18; //可视区域
      let scrollHeight = document.body.scrollHeight; // 滚动文档高度
      let scrollTop = parseInt(document.documentElement.scrollTop); // 已滚动的高度
      let height = 300;
      if (
        scrollTop + clientHeight >= scrollHeight - height &&
        scrollHeight != 0
      ) {
         if (this.pageSize > this.total) {
          this.isLoding = false;
          this.finishLoding = true;
          window.removeEventListener("scroll", this.throttle(), false);
        }else{
          this.currentPage + 1;
          this.pageSize = this.pageSize += 12;
          this.fetchAllCoursesList();
        }
      } else { 
        return false;
      }
    },
     throttle(fn, wait) {
      // 封装函数进行节流
      var timer = null;
      return function () {
        var context = this;
        var args = arguments;
        if (!timer) {
          timer = setTimeout(function () {
            fn.apply(context, args);
            timer = null;
          }, wait);
        }
      };
    },
  },

4、created 里面调用获取列表的方法

  created() {
    this.fetchCoursesList();
  },

5、用节流的方式 监听scroll事件，以及切出页面后移除监听事件

  mounted() {
    window.addEventListener("scroll", this.throttle(this.scrollFn, 500));
  },
  destroyed() {
    window.removeEventListener("scroll", this.throttle(), false);
  },