infinite-scroll.vue 722 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <ul
  3. v-infinite-scroll="load"
  4. class="infinite-list"
  5. style="
  6. overflow: auto;
  7. height: 300px;
  8. padding: 0;
  9. margin: 0;
  10. list-style: none;
  11. "
  12. >
  13. <li
  14. v-for="i in count"
  15. :key="i"
  16. class="infinite-list-item"
  17. style="
  18. display: flex;
  19. align-items: center;
  20. justify-content: center;
  21. height: 50px;
  22. background: var(--el-color-primary-light-9);
  23. margin: 10px;
  24. color: var(--el-color-primary);
  25. margin-top: 10px;
  26. "
  27. >
  28. {{ i }}
  29. </li>
  30. </ul>
  31. </template>
  32. <script lang="ts" setup>
  33. import { ref } from 'vue'
  34. const count = ref(0)
  35. const load = () => {
  36. count.value += 2
  37. }
  38. </script>