basic.vue 701 B

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