vue 鼠标滚动 加载组件
Vue-scroll-loader (vue-scroll-loader)
A scroll loading component for vue.js.
vue.js的滚动加载组件。
安装 (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 鼠标滚动 加载组件