Scroll 无限滚动

概述

常用于滚动至底部时,触发加载更多数据。

代码示例

Scroll 无限滚动 - 图1

底部触发

当滚动至底部时,触发加载更多。

需返回 Promise。

  1. <template>
  2. <Scroll :on-reach-bottom="handleReachBottom">
  3. <Card dis-hover v-for="(item, index) in list1" :key="index" style="margin: 32px 0">
  4. Content {{ item }}
  5. </Card>
  6. </Scroll>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. list1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  13. }
  14. },
  15. methods: {
  16. handleReachBottom () {
  17. return new Promise(resolve => {
  18. setTimeout(() => {
  19. const last = this.list1[this.list1.length - 1];
  20. for (let i = 1; i < 11; i++) {
  21. this.list1.push(last + i);
  22. }
  23. resolve();
  24. }, 2000);
  25. });
  26. }
  27. }
  28. }
  29. </script>

Scroll 无限滚动 - 图2

顶部触发

当滚动至顶部时,触发加载更多。

需返回 Promise。

  1. <template>
  2. <Scroll :on-reach-top="handleReachTop">
  3. <Card dis-hover v-for="(item, index) in list2" :key="index" style="margin: 32px 0">
  4. Content {{ item }}
  5. </Card>
  6. </Scroll>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. list2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  13. }
  14. },
  15. methods: {
  16. handleReachTop () {
  17. return new Promise(resolve => {
  18. setTimeout(() => {
  19. const first = this.list2[0];
  20. for (let i = 1; i < 11; i++) {
  21. this.list2.unshift(first - i);
  22. }
  23. resolve();
  24. }, 2000);
  25. });
  26. }
  27. }
  28. }
  29. </script>

Scroll 无限滚动 - 图3

边缘触发

当滚动至底部或顶部时,触发加载更多。

需返回 Promise。

  1. <template>
  2. <Scroll :on-reach-edge="handleReachEdge">
  3. <Card dis-hover v-for="(item, index) in list3" :key="index" style="margin: 32px 0">
  4. Content {{ item }}
  5. </Card>
  6. </Scroll>
  7. </template>
  8. <script>
  9. export default {
  10. data () {
  11. return {
  12. list3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  13. }
  14. },
  15. methods: {
  16. handleReachEdge (dir) {
  17. return new Promise(resolve => {
  18. setTimeout(() => {
  19. if (dir > 0) {
  20. const first = this.list3[0];
  21. for (let i = 1; i < 11; i++) {
  22. this.list3.unshift(first - i);
  23. }
  24. } else {
  25. const last = this.list3[this.list3.length - 1];
  26. for (let i = 1; i < 11; i++) {
  27. this.list3.push(last + i);
  28. }
  29. }
  30. resolve();
  31. }, 2000);
  32. });
  33. }
  34. }
  35. }
  36. </script>

API

Scroll props

属性说明类型默认值
height滚动区域的高度,单位像素String | Number300
loading-text加载中的文案String加载中
on-reach-top滚动至顶部时触发,需返回 PromiseFunction-
on-reach-bottom滚动至底部时触发,需返回 PromiseFunction-
on-reach-edge滚动至顶部或底部时触发,需返回 PromiseFunction-
distance-to-edge从边缘到触发回调的距离。如果是负的,回调将在到达边缘之前触发。值最好在 24 以下。Number | Array[20, 20]