list_load.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  2. <van-list
  3. v-model:loading="loading"
  4. :finished="finished"
  5. finished-text="没有更多了"
  6. @load="onList"
  7. >
  8. [list]
  9. </van-list>
  10. </van-pull-refresh>
  11. <script>
  12. function list_load(url, form = {}) {
  13. let base = {};
  14. base.form = Vue.reactive(form);
  15. base.page = Vue.ref(1);
  16. base.loading = Vue.ref(false);
  17. base.finished = Vue.ref(false);
  18. base.refreshing = Vue.ref(false);
  19. base.list = Vue.reactive([]);
  20. base.onList = () => {
  21. let param = {...base.form};
  22. param.page = base.page.value;
  23. base.page.value++;
  24. postJson(url, param).then(function (data) {
  25. base.loading.value = false;
  26. if (base.refreshing.value) base.refreshing.value = false;
  27. if (data.length === 0) {
  28. base.finished.value = true;
  29. } else {
  30. base.list.push(...data);
  31. }
  32. });
  33. };
  34. base.onRefresh = () => {
  35. base.list = Vue.reactive([]);
  36. base.page.value = 1;
  37. base.loading.value = true;
  38. base.finished.value = false;
  39. base.onList();
  40. };
  41. return base;
  42. }
  43. </script>