安裝
npm install vue-infinite-scroll

引入
import InfiniteScroll from 'vue-infinite-scroll'
Vue.use(InfiniteScroll)

使用
<div class='content'
v-infinite-scroll="loadMore"
infinite-scroll-distance="30"
infinite-scroll-disabled="busy"
infinite-scroll-immediate-check="false">
這里是很多的數(shù)據(jù)
</div>

data () {
  return {
     busy:false,
   }
 },
methods: {
   loadMore() {
       this.busy=true    // 避免重復(fù)請求，設(shè)置為true，數(shù)據(jù)請求完畢并且還有更多數(shù)據(jù)再設(shè)置為false
       TODO ... //這里是請求api的代碼
   },
}

文檔
infinite-scroll-disabled：如果該屬性的值為true，則將禁用無限滾動。
infinite-scroll-distance：頁面滾動到離頁尾距離多少觸發(fā)回調(diào)函數(shù)，單位是像素值
infinite-scroll-immediate-check： 默認(rèn)值true 指令在綁定后立即檢查，如果初始化數(shù)據(jù)不夠填充滾動容器的情況下可再次觸發(fā) loadMore
infinite-scroll-listen-for-event： 在Vue實例觸發(fā)事件時，無限滾動將再次執(zhí)行。
infinite-scroll-throttle-delay：默認(rèn)值200 兩次檢查之間的時間間隔

中途發(fā)生個搞笑的事情
業(yè)務(wù)專員提出在列表下拉選著商品，點擊一個商品進(jìn)入詳情，再回來的時候列表又回到了頂部的10條數(shù)據(jù)，當(dāng)然了頁面重新載入重新加載數(shù)據(jù)了當(dāng)然在頂部了，事實雖然是這樣，但是體驗真的不好。
立刻想方案，第一個想法是把數(shù)據(jù)存在vuex中，并且把用戶滾動的距離也存起來，下次進(jìn)入列表頁的時候去vuex中取，如果vuex中沒有再去請求刷新數(shù)據(jù)，想想就覺得邏輯麻煩，為啥是這樣的想法呢，主要還是傻給鬧的，嗯，真傻
想到有個keep-alive可以用起來

場景：A列表頁面， B詳情頁面
從A->B 再從B->A 希望能保留A頁面的歷史信息

app.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

router/index.js 實現(xiàn)

{
   path: "/A",
   name:'A',
   component:A,
   meta:{
      keepAlive:true,
   }
}

看似很完美的實現(xiàn)
因為A頁面使用到了keep-alive和infinite-scroll導(dǎo)致在B頁面的時候觸發(fā)了A頁面的infinite-scroll方法

infinite-scroll-disabled登場 只需要更改infinite-scroll-disabled的值就好了啊

這里得說下keep-alive生命周期：
A頁面在第一次進(jìn)入的時候，鉤子的觸發(fā)順序created-> mounted-> activated，退出時觸發(fā)deactivated。B回到A時，只觸發(fā)activated。

因此解決方案是

activated(){  // keep-alive 組件激活時使用
   this.busy = false
 },
 deactivated () {  // keep-alive 組件停用時使用
    this.busy = true    
 },

以上 Thanks