vue-infinite-scroll下拉加载数据 keep-

安装
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">
这里是很多的数据
</div>

data () {
  return {
     busy:false,
   }
 },
methods: {
   loadMore() {
       this.busy=true    // 避免重复请求，设置为true，数据请求完毕并且还有更多数据再设置为false
       TODO ... //这里是请求api的代码
   },
}

文档
infinite-scroll-disabled：如果该属性的值为true，则将禁用无限滚动。
infinite-scroll-distance：页面滚动到离页尾距离多少触发回调函数，单位是像素值
infinite-scroll-immediate-check： 默认值true 指令在绑定后立即检查，如果初始化数据不够填充滚动容器的情况下可再次触发 loadMore
infinite-scroll-listen-for-event： 在Vue实例触发事件时，无限滚动将再次执行。
infinite-scroll-throttle-delay：默认值200 两次检查之间的时间间隔

中途发生个搞笑的事情
业务专员提出在列表下拉选着商品，点击一个商品进入详情，再回来的时候列表又回到了顶部的10条数据，当然了页面重新载入重新加载数据了当然在顶部了，事实虽然是这样，但是体验真的不好。
立刻想方案，第一个想法是把数据存在vuex中，并且把用户滚动的距离也存起来，下次进入列表页的时候去vuex中取，如果vuex中没有再去请求刷新数据，想想就觉得逻辑麻烦，为啥是这样的想法呢，主要还是傻给闹的，嗯，真傻
想到有个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 实现

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

看似很完美的实现
因为A页面使用到了keep-alive和infinite-scroll导致在B页面的时候触发了A页面的infinite-scroll方法

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

这里得说下keep-alive生命周期：
A页面在第一次进入的时候，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。B回到A时，只触发activated。

因此解决方案是

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

以上 Thanks