• InfiniteScroll 无限滚动
    • 基础用法
    • 禁用加载
    • Attributes

    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