vue 项目如何实现无限滚动 分页加载数据

安装

官网是：https://github.com/ElemeFE/vue-infinite-scroll
 

npm install vue-infinite-scroll --save

 

管官方也推荐了几种载入方式，但“最vue”的方式肯定是在main.js中加入：

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

实现范例 

官方给的代码范例是假设你在根组件写代码，实际上我们肯定是在子组件里写代码，所以代码也需要略作修改，下方只列有用的代码片段：

          

            
{{item.name}}
          

  data () {
    return {
      count: 0,
      data: [],
      busy: false
    }
  }

  methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)
    }
  }

 

选项解释

v-infinite-scroll="loadMore"表示回调函数是loadMore
infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行，看清楚，busy表示繁忙，繁忙的时候是不执行的。
infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。

vue-infinite-scroll有时候会失效：
|

 

失效解决办法： 把v-if 换成v-show