插件名称 | v-infinite-scroll |
---|---|
发布时间 | 2020年12月18日 |
插件作者 | dflourusso |
基于Vue.js的Web应用程序的另一个双向无限滚动组件。
# Yarn
$ yarn add v-infinite-scroll
# NPM
$ npm install v-infinite-scroll --save
<template>
<v-infinite-scroll :loading="loading" @top="prevPage" @bottom="nextPage" :offset='20' style="max-height: 80vh; overflow-y: scroll;">
<div v-for="item in items">{{item}}</div> // 你的内容
</v-infinite-scroll>
</template>
<script>
export default {
data () {
return {
page: 1,
items: [],
loading: false
}
},
methods: {
prevPage () {
if (this.page == 1) return
--this.page
this.api()
},
nextPage () {
++this.page
this.api()
},
api () {
this.loading = true
myApi.get({page: this.page}).then((response) => {
this.items = response
this.loading = false
})
}
}
}
</script>