docs(list): update demo (#464)

Tencent · Nov 7, 2022 · 861e3a5 · 861e3a5
1 parent 13bd74f
commit 861e3a5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 144 deletions.
diff --git a/src/list/demos/err-tip.vue b/src/list/demos/err-tip.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-list :async-loading="errloading" @scroll="onLoadMore">
+  <t-list :async-loading="loading" @scroll="onLoadMore">
     <t-cell v-for="item in listError" :key="item" align="middle">
       <span class="cell">{{ item }}</span>
     </t-cell>
@@ -12,26 +12,42 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 const listError = ref<any[]>([]);
 
-const errloading = ref('');
+const loading = ref('');
 const showError = ref(false);
 
+const onLoadError = () => {
+  loading.value = 'loading';
+
+  setTimeout(() => {
+    for (let i = 0; i < 8; i++) {
+      listError.value.push(`${listError.value.length + 1}`);
+    }
+    showError.value = true;
+    loading.value = '';
+  }, 1000);
+};
+
 const onLoadMore = () => {
   showError.value = false;
-  if (listError.value.length >= 60 || errloading.value) {
+  if (listError.value.length >= 60 || loading.value) {
     return;
   }
 
-  errloading.value = 'loading';
+  loading.value = 'loading';
 
   setTimeout(() => {
     for (let i = 0; i < 15; i++) {
       listError.value.push(`${listError.value.length + 1}`);
     }
-    errloading.value = '';
+    loading.value = '';
   }, 1000);
 };
+
+onMounted(() => {
+  onLoadError();
+});
 </script>
diff --git a/src/list/demos/mobile.vue b/src/list/demos/mobile.vue
@@ -13,120 +13,30 @@
         </tdesign-demo-block>
       </div>
       <div v-if="currentTab === 'base'">
-        <baseVue />
+        <BaseVue />
       </div>
       <div v-if="currentTab === 'error-tip'">
-        <t-list :async-loading="errloading" @scroll="onLoadMore">
-          <t-cell v-for="item in listError" :key="item" align="middle">
-            <span class="cell">{{ item }}</span>
-          </t-cell>
-          <template #footer>
-            <t-loading v-if="showError" :indicator="false" @click.stop="onLoadMore">
-              <div class="custom-error">请求失败，点击重新<span>加载</span></div>
-            </t-loading>
-          </template>
-        </t-list>
+        <ErrTipDemo />
       </div>
       <div v-if="currentTab === 'pull-refresh'">
         <div class="pull-refresh-wrap">
-          <t-pull-down-refresh v-model="refreshing" @refresh="onRefresh">
-            <t-list :async-loading="pullloading" @scroll="(value) => onScroll(value, 'listPull')">
-              <t-cell v-for="item in listPull" :key="item" align="middle">
-                <span class="cell">{{ item }}</span>
-              </t-cell>
-            </t-list>
-          </t-pull-down-refresh>
+          <PullRefreshDemo />
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, h, onUnmounted } from 'vue';
-import baseVue from './base.vue';
-
-const MAX_DATA_LEN = 60;
-
-const loadData = (data: any, isRefresh?: Boolean) => {
-  const ONCE_LOAD_NUM = 20;
-
-  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);
-  });
-};
+import { ref, onMounted, onUnmounted } from 'vue';
+import BaseVue from './base.vue';
+import ErrTipDemo from './err-tip.vue';
+import PullRefreshDemo from './pull-refresh.vue';
 
 const currentTab = ref('info');
-const list = ref([] as Array<any>);
-const listPull = ref([] as Array<any>);
-const listError = ref([] as Array<any>);
-
-const loading = ref('');
-const errloading = ref('');
-const pullloading = ref('');
-const refreshing = ref(false);
-const showError = ref(false);
-
-const onLoad = (isRefresh?: Boolean) => {
-  if ((list.value.length >= MAX_DATA_LEN && !isRefresh) || loading.value) {
-    return;
-  }
-  loading.value = 'loading';
-  loadData(list, isRefresh).then(() => {
-    loading.value = '';
-    refreshing.value = false;
-  });
-};
-
-const onLoadPull = (isRefresh?: Boolean) => {
-  if ((listPull.value.length >= MAX_DATA_LEN && !isRefresh) || pullloading.value) {
-    return;
-  }
-  pullloading.value = 'loading';
-  loadData(listPull, isRefresh).then(() => {
-    pullloading.value = '';
-    refreshing.value = false;
-  });
-};
-
-const onLoadError = () => {
-  errloading.value = 'loading';
-
-  setTimeout(() => {
-    for (let i = 0; i < 8; i++) {
-      listError.value.push(`${listError.value.length + 1}`);
-    }
-    showError.value = true;
-    errloading.value = '';
-  }, 1000);
-};
-
-const onScroll = (scrollBottom: number, type?: string) => {
-  if (scrollBottom < 50) {
-    type === 'listPull' ? onLoadPull() : onLoad();
-  }
-};
 
 onMounted(() => {
-  onLoad();
-  window.onpopstate = function (event) {
+  window.onpopstate = function () {
     currentTab.value = 'info';
   };
 });
@@ -136,43 +46,9 @@ onUnmounted(() => {
 });
 
 const onChangeTab = (val: any) => {
-  list.value = [];
-  listError.value = [];
-  showError.value = false;
-
-  if (val === 'base') {
-    onLoad();
-  } else if (val === 'error-tip') {
-    onLoadError();
-  } else if (val === 'pull-refresh') {
-    onLoadPull();
-  }
   currentTab.value = val;
   history.pushState({}, '', '?tab=demo');
 };
-
-const onLoadMore = () => {
-  showError.value = false;
-  if (listError.value.length >= 60 || errloading.value) {
-    return;
-  }
-
-  errloading.value = 'loading';
-
-  setTimeout(() => {
-    for (let i = 0; i < 15; i++) {
-      listError.value.push(`${listError.value.length + 1}`);
-    }
-    errloading.value = '';
-  }, 1000);
-};
-
-const loadingPullData = computed(() => Boolean(pullloading.value));
-
-const onRefresh = () => {
-  refreshing.value = true;
-  onLoadPull(true);
-};
 </script>
 
 <style lang="less">

diff --git a/src/list/demos/pull-refresh.vue b/src/list/demos/pull-refresh.vue
@@ -1,6 +1,6 @@
 <template>
   <t-pull-down-refresh v-model="refreshing" @refresh="onRefresh">
-    <t-list :async-loading="pullloading" @scroll="onScroll">
+    <t-list :async-loading="loading" @scroll="onScroll">
       <t-cell v-for="item in listPull" :key="item" align="middle">
         <span class="cell">{{ item }}</span>
       </t-cell>
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 const MAX_DATA_LEN = 60;
 
@@ -39,16 +39,16 @@ const loadData = (data: any, isRefresh?: Boolean) => {
 };
 
 const listPull = ref([] as Array<any>);
-const pullloading = ref('');
+const loading = ref('');
 const refreshing = ref(false);
 
 const onLoadPull = (isRefresh?: Boolean) => {
-  if ((listPull.value.length >= MAX_DATA_LEN && !isRefresh) || pullloading.value) {
+  if ((listPull.value.length >= MAX_DATA_LEN && !isRefresh) || loading.value) {
     return;
   }
-  pullloading.value = 'loading';
+  loading.value = 'loading';
   loadData(listPull, isRefresh).then(() => {
-    pullloading.value = '';
+    loading.value = '';
     refreshing.value = false;
   });
 };
@@ -63,4 +63,8 @@ const onRefresh = () => {
   refreshing.value = true;
   onLoadPull(true);
 };
+
+onMounted(() => {
+  onLoadPull();
+});
 </script>