VUE 項目實現自定義組件 Infinite Scroll 無限滾動加載數據

先上效果圖

起因

我們的項目是類似於知乎的論壇網站，我們在需求分析設計的時候認為分頁用無限滾動的方式加載可以更方便用戶消費我們的信息流。

---

element UI

那么我們項目用的是element UI，最開始我們想到用element UI中自帶的無限滾動的組件

基礎用法

在要實現滾動加載的列表上上添加v-infinite-scroll，並賦值相應的加載方法，可實現滾動到底部時自動執行加載方法。

<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>

但是這幾個無限滾動只能用於列表<ul><li> 而在自定義的組件就不起作用

例如我的項目中用的就是自己定義的組件<Article>

vue-infinite-scroll

之后也上網查了很多Infinite Scroll 的實現方法，比如說引用 vue-infinite-scroll 插件

官網

具體可以詳見這一篇 一個超詳細vue無限滾動vue-infinite-scroll插件的配置及使用詳解

👆但是這個需要引入插件，而且只適合vue2

---

滾動事件監聽頁面

那么有沒有不需要引入插件的方法呢？

那么可以在vue中寫滾動事件監聽頁面window.addEventListener ("scroll", this.load);

之后再用vue的destroyed鈎子函數來銷毀這個事件監聽（一定要銷毀）

<script>
//檢測屏幕滑動高度的 用於無限下拉
import { getScrollHeight, getScrollTop, getWindowHeight } from "@/utils/screen";
//獲取數據的api
import { getListInCommend } from "@/api/postlist";
//引入自定義的組件
import  articleList  from "@/components/articleframe/ArticleBody";
export default {
  name: "TopicList",
  components: {articleList},
  data() {
    return {
      articleList: [],
      //記錄頁面信息
      page: {
        current: 0, //當前頁面
        totalpage:1,//總的頁面數量
        total: 0, //后台總的文章數
      },
    };
  },
  created() {
    this.init()
  },
  methods: {
    //加載帖子列表
    init() {
 		...
      })
    },
    //拉取數據
    load() {
      let vm = this;
      if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
        if (vm.page.current < vm.page.totalpage) {
          //先判斷下一頁是否有數據
          vm.page.current += 1; //查詢條件的頁碼+1
          this.init(this.activeName); //拉取數據
        } else {
            //沒有下一頁了喔
        }
      }
    },
  },
  //主要是滾動事件監聽頁面
  mounted() {
    window.addEventListener("scroll", this.load);
  },
  //destroyed鈎子函數來銷毀這個事件監聽
  destroyed() {
    window.removeEventListener("scroll", this.load, false);
  },
};
</script>

總結

這算是我在實踐中遇到的比較難解決的問題，用了很多種方法都不能實現無限滾動，但是功夫不負有心人，發現了相對簡單而且有效的方法

參考：
vue頁面滾動監聽