|
@@ -0,0 +1,51 @@
|
|
|
+<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="onList"
|
|
|
+ >
|
|
|
+ [list]
|
|
|
+ </van-list>
|
|
|
+</van-pull-refresh>
|
|
|
+
|
|
|
+<script>
|
|
|
+ function list_load(url, form = {}) {
|
|
|
+ let base = {};
|
|
|
+
|
|
|
+ base.form = Vue.reactive(form);
|
|
|
+ base.page = Vue.ref(1);
|
|
|
+ base.loading = Vue.ref(false);
|
|
|
+ base.finished = Vue.ref(false);
|
|
|
+ base.refreshing = Vue.ref(false);
|
|
|
+ base.list = Vue.reactive([]);
|
|
|
+
|
|
|
+ base.onList = () => {
|
|
|
+ let param = {...base.form};
|
|
|
+ param.page = base.page.value;
|
|
|
+ base.page.value++;
|
|
|
+
|
|
|
+ postJson(url, param).then( ({data}) => {
|
|
|
+ base.loading.value = false;
|
|
|
+ if (base.refreshing.value) base.refreshing.value = false;
|
|
|
+ if (data.length === 0) {
|
|
|
+ base.finished.value = true;
|
|
|
+ } else {
|
|
|
+ base.list.push(...data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ base.onRefresh = () => {
|
|
|
+ base.list = Vue.reactive([]);
|
|
|
+ base.page.value = 1;
|
|
|
+ base.loading.value = true;
|
|
|
+ base.finished.value = false;
|
|
|
+
|
|
|
+ base.onList();
|
|
|
+ };
|
|
|
+
|
|
|
+ return base;
|
|
|
+ }
|
|
|
+</script>
|