插件名称 | vue-scroll-loader |
---|---|
发布时间 | 2020年4月17日 |
插件作者 | molvqingtai |
网页加载程序中无限滚动的动画加载器。
# 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>