自己使用的工具是vue、firebase，希望能達到 infinte scroll 的效果。
尋找的關鍵字自然是 vue infinite scroll/ firebase infinite scroll/ vue firebase infinite scroll 再加上 infinite loading, lazy loading 等關鍵字的排列組合。
找到與 firebase 的教學都與 Angular 有關，而 vue 的話則是下面二款為主：
第一款已經很久沒維護了，有一些瑕疵，但是使用簡單而且瑕疵也能進行一些簡單的修補，所以在此紀錄一下。
官方使用教學
var count = 0; // 要推入的資料筆數new Vue({
el: '#app',
data: {
data: [], //欲渲染的資料
busy: false }, //true觸發載入，false停止載入 methods: {
loadMore: function() { this.busy = true; setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) { // j為一次要推入的資料量
this.data.push({ name: count++ });} this.busy = false;}, 1000);}}});
因為自己有好幾個不同區塊要用到同份資料，所以先用firebase將資料都存入 courses 這個空陣列，並新增 infiniteData: [] 來專跑 inifinite scroll 的部分。
自己的想法很簡單，每往下滑就從 courses 往 infiniteData 倒入 5 筆資料，直到 infiniteData.length === courses.length為止。
<template>
<div
class="infinite-scroll"
v-infinite-scroll="loadMore"
infinite-scroll-disabled="busy"
infinite-scroll-distance="15"> <i v-if="infiniteData.length!==courses.length"
class="fas fa-spinner fa-spin"></i>
//此處為自訂的loading icon，並設定當只有在兩個陣列長度不相等時才會顯示 </div>
</template>
_____<script>data() {return {
count: 0, //要推入的資料筆數
infiniteData: [],//inifinite scroll渲染的部分
busy: false, //true觸發載入，false停止載入
courses: [],}; //全部的資料
},methods: { loadMore: function() { if (this.infiniteData.length <= this.courses.length) { this.busy = true; setTimeout(() => {
for (var i = 0, j = 5; i < j; i++) {
if (this.count === this.courses.length) { break;}
this.infiniteData.push(this.courses[this.count++]);} this.busy = false; }, 1000);}}}</script>
- if (this.infiniteData.length <= this.courses.length) 停止無限觸發
vue-infinite-scroll 會有明明資料已經加載完成了，但往下滑 this.count 還會不斷跑的情況出現，因此設定 if (this.infiniteData.length <= this.courses.length) 的條件下才會觸發函式，避免瘋狂加載的情況。
2. if (this.count === this.courses.length) { break } 跳出迴圈
假如設定 j = 5 ，也就是每次加載 5 筆資料，而總資料 courses 卻有 23 筆時，infiniteData 除了被倒入 courses 的資料外，還會被另外倒入 2 筆 undefined 來湊成 5 的倍數 25 筆資料，這時v-for只會顯示前 20 筆資料，後面三筆會受 undefined 影響而不能渲染，因此使用 if (this.count === this.courses.length) { break } ，當 this.count 為 23 時（此時已倒入0~22筆資料）就跳出迴圈，避免 undefined 的產生，如此就能正常渲染了。
