data() {
 return {
  count: -1,
  params: {
   ... // 請求參數(shù)
   pageNo: 0,
   pageSize: 20
  },
  timer:null,
  list: []
 }
},
beforeDestroy() {
 if (this.timer) {
  clearTimeout(this.timer)
  this.timer = null
 }
},
methods: {
 getListData() {
  this.count = -1
  this.params = {
   ... // 請求參數(shù)
   pageNo: 0,
   pageSize: 20
  }
  this.timer = setTimeout(this.getListDataInterval, 1000)
 },
 getListDataInterval() {
  params.pageNo++
  if (params.pageNo === 1) {
   this.list.length = 0
  }
  api(params) // 請求接口
   .then(res => {
    if (res.data) {
     this.count = res.data.count
     this.list.push(...res.data.list)
    }
   })
   .finally(() => {
    if (count >= 0 && this.list.length < count) {
     this.timer = setTimeout(this.getListDataInterval, 1000)
    }
   })
 }
 ...
}

data() {
 return {
  timer: null,
  list: [], // 存儲(chǔ)數(shù)據(jù)的列表
  showList: [], // html中展示的列表
  isLoading: false, // 控制滾動(dòng)加載
  currentPage: 1, // 前端分批次擺放數(shù)據(jù)
  currentPageSize: 50, // 前端分批次擺放數(shù)據(jù)
  lastListIndex: 0, // 記錄當(dāng)前獲取到的最新數(shù)據(jù)位置
  lastTimeIndex: 0, // 記錄當(dāng)前獲取到的最新數(shù)據(jù)位置
 }
},
created() { // 優(yōu)化點(diǎn)：可做可不做，其中的數(shù)值都是按照卡片的寬高直接寫入的，因?yàn)椴皇峭ㄓ媒M件，所以從簡。
 this.currentPageSize = Math.round(
  (((window.innerHeight / 190) * (window.innerWidth - 278 - 254)) / 220) * 3
 ) // (((window.innerHeight / 卡片高度和豎向間距) * (window.innerWidth - 列表內(nèi)容距視口左右的總距離 - 卡片寬度和橫向間距)) / 卡片寬度) * 3
// *3代表我希望每次加載至少能多出三個(gè)視口高度的數(shù)據(jù)；列表內(nèi)容距視口左右的總距離：是因?yàn)槲沂莾蛇吂潭▽挾?，中間適應(yīng)展示內(nèi)容的結(jié)構(gòu)
},
beforeDestroy() {
 if (this.timer) {
  clearTimeout(this.timer)
  this.timer = null
 }
},
methods: {
 /**
  * @description: 獲取時(shí)間點(diǎn)的數(shù)據(jù)
  */
 getTimelineData(listIndex, timeIndex) {
  if (
   // this.list的第一、二層是時(shí)間軸this.list[listIdex].timeLines[timeIndex]，在獲取時(shí)間點(diǎn)數(shù)據(jù)之前獲取了
   this.list &&
   this.list[listIndex] &&
   this.list[listIndex].timeLines &&
   this.list[listIndex].timeLines[timeIndex] &&
   this.showList &&
   this.showList[listIndex] &&
   this.showList[listIndex].timeLines &&
   this.showList[listIndex].timeLines[timeIndex]
  ) {
   this.isLoading = true
   // 把當(dāng)前時(shí)間點(diǎn)變成展示狀態(tài)
   if (!this.showList[listIndex].active) {
    this.handleTimeClick(listIndex, this.showList[listIndex])
   }
   if (!this.showList[listIndex].timeLines[timeIndex].active)
    this.handleTimeClick(
     listIndex,
     this.showList[listIndex].timeLines[timeIndex]
    )
   if (!this.list[listIndex].timeLines[timeIndex].snapDetailList) {
    this.currentPage = 1
   }
   if (
    !this.list[listIndex].timeLines[timeIndex].snapDetailList // 第一次加載時(shí)間點(diǎn)數(shù)據(jù)，后面的或條件可省略
   ) {
    
    return suspectSnapRecords({
     ...
    })
     .then(res => {
      if (res.data && res.data.list && res.data.list.length) {
       let show = []
       res.data.list.forEach((item, index) => {
        show[index] = {}
        if (index < 50) {
         show[index].show = true
        } else {
         show[index].show = true
        }
       })
       this.$set(
        this.list[listIndex].timeLines[timeIndex],
        'snapDetailList',
        res.data.list
       )
       this.$set(
        this.showList[listIndex].timeLines[timeIndex],
        'snapDetailList',
        res.data.list.slice(0, this.currentPageSize)
       )
       this.$set(
        this.showList[listIndex].timeLines[timeIndex],
        'showList',
        show
       )
       this.currentPage++
       this.lastListIndex = listIndex
       this.lastTimeIndex = timeIndex
      }
     })
     .finally(() => {
      this.$nextTick(() => {
       this.isLoading = false
      })
     })
   } else { // 此處是時(shí)間點(diǎn)被手動(dòng)關(guān)閉，手動(dòng)關(guān)閉會(huì)把showList中的數(shù)據(jù)清空，但是已經(jīng)加載過數(shù)據(jù)的情況
    if (
     this.showList[listIndex].timeLines[timeIndex].snapDetailList
      .length === 0
    ) {
     this.currentPage = 1
     this.lastListIndex = listIndex
     this.lastTimeIndex = timeIndex
    }
    this.showList[listIndex].timeLines[timeIndex].snapDetailList.push(
     ...this.list[listIndex].timeLines[timeIndex].snapDetailList.slice(
      (this.currentPage - 1) * this.currentPageSize,
      this.currentPage * this.currentPageSize
     )
    )
    this.currentPage++
    this.$nextTick(() => {
     this.isLoading = false
    })
    return
   }
  } else {
   return
  }
 },
 /**
  * @description: 頁面滾動(dòng)監(jiān)聽，用的是公司內(nèi)部的框架，就不展示html了，不同框架原理都是一樣的，只是需要寫的代碼多與少的區(qū)別，如ElementUI的InfiniteScroll，可以直接設(shè)置觸發(fā)加載的距離閾值
  */
 handleScroll({ scrollTop, percentY }) { // 此處的scrollTop是組件返回的縱向滾動(dòng)的已滾動(dòng)距離，percentY則是已滾動(dòng)百分比
   this.bus.$emit('scroll') // 觸發(fā)全局的滾動(dòng)監(jiān)聽，用于圖片的懶加載
   this.scrolling = true
   if (this.timer) { // 防抖機(jī)制，直至滾動(dòng)停止才會(huì)運(yùn)行定時(shí)器內(nèi)部內(nèi)容
    clearTimeout(this.timer)
   }
   this.timer = setTimeout(() => {
    requestAnimationFrame(async () => {
     // 因?yàn)閮?nèi)部有觸發(fā)重排重繪，所以把代碼放在requestAnimationFrame中執(zhí)行
     let height = window.innerHeight
     if (
      percentY > 0.7 && // 保證最開始的時(shí)候不要瘋狂加載，已滾動(dòng)70%再加載
      Math.round(scrollTop / percentY) - scrollTop < height * 2 && // 保證數(shù)據(jù)量大后滾動(dòng)頁面長的時(shí)候不要瘋狂加載，在觸底小于兩倍視口高度的時(shí)候才加載
      !this.isLoading // 保險(xiǎn)，不同時(shí)運(yùn)行下面代碼，以防運(yùn)行時(shí)間大于定時(shí)時(shí)間
     ) {
      this.isLoading = true
      let len = this.list[this.lastListIndex].timeLines[
       this.lastTimeIndex
      ].snapDetailList.length // list為一次性獲取所有數(shù)據(jù)存在內(nèi)存中
      if ((this.currentPage - 1) * this.currentPageSize < len) { // 前端分批次展示的情況
       this.showList[this.lastListIndex].timeLines[
        this.lastTimeIndex
       ].snapDetailList.push(
        ...this.list[this.lastListIndex].timeLines[
         this.lastTimeIndex
        ].snapDetailList.slice(
         (this.currentPage - 1) * this.currentPageSize,
         this.currentPage * this.currentPageSize
        )
       )
       this.currentPage++
      } else if (
       this.list[this.lastListIndex].timeLines.length >
       this.lastTimeIndex + 1
      ) { // 前端分批次展示完上一波數(shù)據(jù)，該月份時(shí)間軸上下一個(gè)時(shí)間點(diǎn)存在的情況
       await this.getTimelineData(
        this.lastListIndex,
        this.lastTimeIndex + 1
       )
      } else if (this.list.length > this.lastTimeIndex + 1) { // 前端分批次展示完上一波數(shù)據(jù)，該月份時(shí)間軸上下一個(gè)時(shí)間點(diǎn)不存在，下一個(gè)月份存在的情況
       await this.getTimelineData(this.lastListIndex + 1, 0)
      }
     }
     this.$nextTick(() => {
      this.isLoading = false
      this.scrolling = false
     })
    })
   }, 500)
  },

// main.js
Vue.prototype.bus = new Vue()
...

// components/DefaultImage.vue
<template>
 <div class="default-image" ref="image">
  <img src="@/assets/images/image_empty.png" v-if="imageLoading" />
  <img
   class="image"
   v-if="showSrc"
   v-show="!imageLoading && !imageError"
   :src="showSrc"
   @load="imageLoading = false"
   @error="
    imageLoading = false
    imageError = true
   "
  />
  <img src="@/assets/images/image_error.png" v-if="imageError" />
 </div>
</template>
<script>
export default {
 name: 'DefaultImage',
 props: {
  src: String, // 圖片源
  lazy: Boolean // 懶加載
 },
 data() {
  return {
   imageLoading: true,
   imageError: false,
   showSrc: '', // 渲染的src
   timer: null
  }
 },
 mounted() {
  if (this.lazy) {
   this.$nextTick(() => {
    this.isShowImage()
   })
   this.bus.$on('scroll', this.handleScroll)
  } else {
   this.showSrc = this.src
  }
 },
 beforeDestroy() {
  if (this.lazy) {
   this.bus.$off('scroll', this.handleScroll)
  }
  if (this.timer) {
   clearTimeout(this.timer)
   this.timer = null
  }
 },
 methods: {
  handleScroll() {
   if (this.timer) {
    clearTimeout(this.timer)
   }
   this.timer = setTimeout(this.isShowImage, 300)
  },
  isShowImage() {
   let image = this.$refs.image
   if (image) {
    let rect = image.getBoundingClientRect()
    const yInView = rect.top < window.innerHeight && rect.bottom > 0
    const xInView = rect.left < window.innerWidth && rect.right > 0
    if (yInView && xInView) {
     this.showSrc = this.src
     this.bus.$off('scroll', this.handleScroll)
    }
   }
  }
 }
}
</script>