vue 鼠标滚动 加载组件_vue.js的滚动加载组件

vue 鼠标滚动 加载组件

Vue-scroll-loader (vue-scroll-loader)

A scroll loading component for vue.js.

vue.js的滚动加载组件。

View demo 查看演示 Download Source 下载源

安装 (Install)

NPM

NPM

npm install vue-scroll-loader

CDN

CDN

<script src="https://unpkg.com/vue-scroll-loader"></script>

用法 (Usage)

Use <scroll-loader/> to enable the scroll load, and use loader-* props to define its options.

使用<scroll-loader/>启用滚动加载，并使用loader- * props定义其选项。

The method appointed as the props of loader-method will be executed when the bottom of the scroll-loader reaches the bottom of the viewport.

当滚动加载器的底部到达视口底部时，将执行指定为加载器方法的属性的方法 。

<scroll-loader :loader-method="getImagesInfo" :loader-enable="loadMore">
</scroll-loader>

<!-- Replace the default loading animation with slot -->
<scroll-loader :loader-method="getImagesInfo" :loader-enable="loadMore">
    <div>Loading...</div>
</scroll-loader>

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

Vue.use(ScrollLoader)

new Vue({
    el: '#app',
    data() {
      return {
        loadMore: true,
        page: 1,
        pageSize: 9,
        images: [],
      }
    },
    methods: {
      getImagesInfo() {
        axios.get('https://api.example.com/', {
            params: {
              page: this.page++,
              per_page: this.pageSize,
            }
          })
          .then(res => {
            this.images.concat(res.data)
            
            // Stop scroll-loader
            res.data.length < this.pageSize && (this.loadMore = false)
          })
          .catch(error => {
            console.log(error);
          })
      }
    },
    mounted() {
      this.getImagesInfo()
    }
  })

选件 (Options)

Props	Description	Required	Type	Default
loader-method	Scrolling to the bottom to execute the method	true	Function	--
loader-enable	Scroll-loader will be disabled if the value of this props is false.	true	Boolean	--
loder-throttle	Check the frequency of scrolling to the bottom (ms)	false	Number	100
loader-distance	The minimum distance between the bottom of the scroll-loader and the bottom of the viewport before the ":loader-method" method is executed.	false	Number	0
loader-color	scroll-loader the color of the animation	false	String	#96C8FF
loader-size	scroll-loader the size of the animation	false	String	35px

道具	描述	需要	类型	默认
加载器方法	滚动到底部以执行该方法	真正	功能	-
启用加载程序	如果此props的值为false，则将禁用滚动加载器。	真正	布尔型	-
油门节气门	检查滚动到底部的频率(毫秒)	假	数	100
装载距离	在执行“：loader-method”方法之前，滚动加载器的底部与视口底部之间的最小距离。	假	数	0
装载机颜色	滚动加载器动画的颜色	假	串	＃96C8FF
装载机尺寸	滚动加载器动画的大小	假	串	35像素

翻译自: https://vuejsexamples.com/a-scroll-loading-component-for-vue-js/

vue 鼠标滚动 加载组件