Vue.js的双向无限滚动组件 - v-infinite-scroll

Vue.js的双向无限滚动组件 - v-infinite-scroll
插件名称 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>