Merge pull request #77 from Dengzygx/feat/update_list_demo

fix: 修改list的demo
Tencent · Apr 15, 2022 · bf080f6 · bf080f6
2 parents 5b2a6b5 + bd518f3
commit bf080f6
Showing 1 changed file with 42 additions and 21 deletions.
diff --git a/src/list/demos/pull-refresh.vue b/src/list/demos/pull-refresh.vue
@@ -1,7 +1,7 @@
 <template>
   <t-pull-down-refresh v-model="refreshing" @refresh="onRefresh">
-    <t-list :async-loading="pullloading" @scroll="(e) => onScroll(e, 2)">
-      <t-cell v-for="item in listPull" :key="item" align="middle">
+    <t-list @scroll="(e) => onScroll(e, 2)">
+      <t-cell v-for="item in list" :key="item" align="middle">
         <span class="cell">{{ item }}</span>
       </t-cell>
     </t-list>
@@ -11,34 +11,45 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted } from 'vue';
 
+const MAX_DATA_LEN = 60;
+const loadData = (data: any, isRefresh?: Boolean) => {
+  const ONCE_LOAD_NUM = 15;
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const temp = [];
+      for (let i = 0; i < ONCE_LOAD_NUM; i++) {
+        if (isRefresh) {
+          temp.push(`${i + 1}`);
+        } else {
+          temp.push(`${data.value.length + 1 + i}`);
+        }
+      }
+
+      if (isRefresh) {
+        data.value = temp;
+      } else {
+        data.value.push(...temp);
+      }
+
+      resolve(data);
+    }, 1000);
+  });
+};
 export default defineComponent({
   setup() {
     const list = ref([] as Array<any>);
     const loading = ref(false);
     const refreshing = ref(false);
 
-    const onLoad = (isRefresh?: boolean) => {
-      if (list.value.length >= 60 || loading.value) {
+    const onLoad = (isRefresh?: Boolean) => {
+      if ((list.value.length >= MAX_DATA_LEN && !isRefresh) || loading.value) {
         return;
       }
       loading.value = true;
-      setTimeout(() => {
-        const temp = [];
-        for (let i = 0; i < 15; i++) {
-          if (isRefresh) {
-            temp.push(`${i + 1}`);
-          } else {
-            temp.push(`${list.value.length + 1}`);
-          }
-        }
-        if (isRefresh) {
-          list.value = temp;
-        } else {
-          list.value.push(...temp);
-        }
+      loadData(list, isRefresh).then(() => {
         loading.value = false;
-        refreshing.value = false;
-      }, 1000);
+      });
     };
 
     const onScroll = ({ scrollBottom }: { scrollBottom: number }) => {
@@ -47,9 +58,18 @@ export default defineComponent({
       }
     };
 
+    const onLoadPull = (isRefresh?: Boolean) => {
+      if (list.value.length >= MAX_DATA_LEN && !isRefresh) {
+        return;
+      }
+      loadData(list, isRefresh).then(() => {
+        refreshing.value = false;
+      });
+    };
+
     const onRefresh = () => {
       refreshing.value = true;
-      onLoad(true);
+      onLoadPull(true);
     };
 
     onMounted(() => {
@@ -63,6 +83,7 @@ export default defineComponent({
       onLoad,
       onScroll,
       onRefresh,
+      onLoadPull,
     };
   },
 });