InfiniteScroll 无限滚动

滚动至底部时,加载更多数据。

基础用法

在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。

InfiniteScroll 无限滚动 - 图1

  1. <template>
  2. <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
  3. <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  4. </ul>
  5. </template>
  6. <script>
  7. export default {
  8. data () {
  9. return {
  10. count: 0
  11. }
  12. },
  13. methods: {
  14. load () {
  15. this.count += 2
  16. }
  17. }
  18. }
  19. </script>

禁用加载

InfiniteScroll 无限滚动 - 图2

  1. <template>
  2. <div class="infinite-list-wrapper" style="overflow:auto">
  3. <ul
  4. class="list"
  5. v-infinite-scroll="load"
  6. infinite-scroll-disabled="disabled">
  7. <li v-for="i in count" class="list-item">{{ i }}</li>
  8. </ul>
  9. <p v-if="loading">加载中...</p>
  10. <p v-if="noMore">没有更多了</p>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. data () {
  16. return {
  17. count: 10,
  18. loading: false
  19. }
  20. },
  21. computed: {
  22. noMore () {
  23. return this.count >= 20
  24. },
  25. disabled () {
  26. return this.loading || this.noMore
  27. }
  28. },
  29. methods: {
  30. load () {
  31. this.loading = true
  32. setTimeout(() => {
  33. this.count += 2
  34. this.loading = false
  35. }, 2000)
  36. }
  37. }
  38. }
  39. </script>

Attributes

参数说明类型可选值默认值
infinite-scroll-disabled是否禁用boolean-false
infinite-scroll-delay节流时延,单位为msnumber-200
infinite-scroll-distance触发加载的距离阈值,单位为pxnumber-0
infinite-scroll-immediate是否立即执行加载方法,以防初始状态下内容无法撑满容器。boolean-true