网页加载程序中无限滚动的动画加载器。

安装和下载：

# NPM
$ npm install vue-scroll-loader --save

使用：

1.将寄存器导入无限滚动加载器。

import Vue from 'vue'
import ScrollLoader from 'vue-scroll-loader'

Vue.use(ScrollLoader)

2.将滚动加载器插入模板。

<scroll-loader :loader-method="getImagesList" :loader-disable="disable">
  <div>Loading...</div>
</scroll-loader>

3.创建一个无限滚动的Web应用程序，如下所示：

new Vue({
    el: '#app',
    data() {
      return {
        disable: false,
        page: 1,
        pageSize: 30,
        images: [],
        masksHide: []
      }
    },
    methods: {
      getImagesList() {
        axios.get('https://api.unsplash.com/photos', {
          params: {
            page: this.page++,
            per_page: this.pageSize,
            client_id: 'e874834b096dcd107c232fe4b0bb521158b62e486580c988b0a75cb0b77a2abe'
          }
        }).then(res => {
          res.data && (this.images = [...this.images, ...res.data])
        }).catch(error => {
          console.log(error)
        })
      }
    },
    watch: {
      page (value) {
        this.disable = value > 10
      }
    }
})

4.定制滚动加载器的可用props 。

<scroll-loader 
  :loader-method="getImagesList" 
  :loader-disable="disable"
  :loader-distance="0"
  :loader-color="#666"
  :loader-size="50"
  :loader-viewport="viewport"
  >
  <div>Loading...</div>
</scroll-loader>

---

官网：https://github.com/molvqingtai/vue-scroll-loader

演示：https://www.vue365.cn/code_demo.php?id=245

GitHub下载：https://github.com/molvqingtai/vue-scroll-loader/archive/master.zip