安装
npm install vue-infinite-scroll
引入
import InfiniteScroll from 'vue-infinite-scroll'
Vue.use(InfiniteScroll)
使用
v-infinite-scroll="loadMore"
infinite-scroll-distance="30"
infinite-scroll-disabled="busy"
infinite-scroll-immediate-check="false">
这里是很多的数据
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
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