From ff31beac8f5ad65ddc0e31208c1f662968a65542 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Thu, 24 Aug 2023 17:38:42 +0800
Subject: [PATCH] =?UTF-8?q?long-list:=20=E5=A2=9E=E5=8A=A0=20loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/template/long-list/long-list-page.uvue | 74 +++++++++++++-------
 pages/template/long-list/long-list.uvue      | 19 ++---
 2 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/pages/template/long-list/long-list-page.uvue b/pages/template/long-list/long-list-page.uvue
index 06fcabe6..167b564e 100644
--- a/pages/template/long-list/long-list-page.uvue
+++ b/pages/template/long-list/long-list-page.uvue
@@ -1,27 +1,33 @@
 <template>
-  <list-view class="list" ref="listView" @scroll="onScroll" @scrolltolower="loadData">
-    <list-item class="list-item" v-for="(item, index) in dataList" :key="index">
-      <view class="list-item-icon">
-        <image class="list-item-icon-image" :src="item.plugin_img_link"></image>
-      </view>
-      <view class="list-item-fill">
-        <view class="flex-row">
-          <text class="title">{{item.plugin_name}}</text>
+  <list-view class="list" ref="listView" @scrolltolower="loadData">
+    <template v-for="(item, index) in dataList" :key="index">
+      <list-item class="list-item">
+        <view class="list-item-icon">
+          <image class="list-item-icon-image" :src="item.plugin_img_link"></image>
         </view>
-        <view class="description">
-          <text class="description-text">{{item.plugin_intro}}</text>
+        <view class="list-item-fill">
+          <view class="flex-row">
+            <text class="title">{{item.plugin_name}}</text>
+          </view>
+          <view class="description">
+            <text class="description-text">{{item.plugin_intro}}</text>
+          </view>
+          <text class="icon-star star">{{convertToStarUnicode(item.score)}}</text>
+          <view class="tag-list">
+            <text class="tag-item" v-for="(item2, index2) in item.tags" :key="index2">{{item2}}</text>
+          </view>
+          <view class="flex-row update-date">
+            <text class="update-date-text">更新日期</text>
+            <text class="update-date-value">{{item.update_date}}</text>
+            <text class="author">{{item.author_name}}</text>
+          </view>
         </view>
-        <text class="icon-star star">{{convertToStarUnicode(item.score)}}</text>
-        <view class="tag-list">
-          <text class="tag-item" v-for="(item2, index2) in item.tags" :key="index2">{{item2}}</text>
-        </view>
-        <view class="flex-row update-date">
-          <text class="update-date-text">更新日期</text>
-          <text class="update-date-value">{{item.update_date}}</text>
-          <text class="author">{{item.author_name}}</text>
-        </view>
-      </view>
-    </list-item>
+      </list-item>
+      <!-- TODO 暂时这样写才能保证 loading 在 list 底部 -->
+      <list-item key="loading" v-if="index==dataList.length-1">
+        <text class="loading">{{loadingText}}</text>
+      </list-item>
+    </template>
   </list-view>
 </template>
 
@@ -57,9 +63,23 @@
         loading: false,
         dataList: [] as ListItem[],
         isEnded: false,
+        loadingError: '',
         $currentPage: 0
       }
     },
+    computed: {
+      loadingText() : string {
+        if (this.loading) {
+          return "加载中..."
+        } else if (this.isEnded) {
+          return "没有更多了"
+        } else if (this.loadingError.length > 0) {
+          return this.loadingError
+        } else {
+          return ""
+        }
+      }
+    },
     mounted() {
       uni.loadFontFace({
         global: false,
@@ -105,7 +125,7 @@
             }
           },
           fail: (err) => {
-            console.log(err)
+            this.loadingError = err.errMsg
           },
           complete: () => {
             this.loading = false
@@ -128,10 +148,6 @@
         if (nullStarCount > 0) { result += null_code.repeat(nullStarCount) }
 
         return result
-      },
-      onScroll(e : ScrollEvent) {
-        // TODO e.detail.deltaY 值不正确
-        this.$emit('pageScroll', e.detail.deltaY)
       }
     }
   }
@@ -215,4 +231,10 @@
     color: #008000;
     margin-left: auto;
   }
+
+  .loading {
+    padding: 20px;
+    text-align: center;
+    background-color: #f8f8f8;
+  }
 </style>
\ No newline at end of file
diff --git a/pages/template/long-list/long-list.uvue b/pages/template/long-list/long-list.uvue
index 50351e1a..1d45b45f 100644
--- a/pages/template/long-list/long-list.uvue
+++ b/pages/template/long-list/long-list.uvue
@@ -10,7 +10,7 @@
             <view class="swiper-tabs-item" v-for="(item, index) in swiperList" :id="'swipertab' + index" ref="swipertab"
               :key="index" @click="onTabClick(index)">
               <text class="swiper-tabs-item-text"
-                :class="swiperIndex==index ? 'uni-tab-item-title-active' : ''">{{item.name}}</text>
+                :class="swiperIndex==index ? 'swiper-tabs-item-text-active' : ''">{{item.name}}</text>
             </view>
           </view>
           <view class="swiper-tabs-indicator">
@@ -22,7 +22,7 @@
       <swiper class="swiper-view" ref="swiper" :current="swiperIndex" @change="onSwiperChange"
         @transition="onSwiperTransition" @animationfinish="onSwiperAnimationfinish">
         <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
-          <long-page ref="longPage" :type="item.type" @pageScroll="onSwiperItemPageScroll"></long-page>
+          <long-page ref="longPage" :type="item.type"></long-page>
         </swiper-item>
       </swiper>
     </view>
@@ -120,17 +120,9 @@
         //console.log(this.$lastSwiperIndex, moveToIndex, offsetX, this.$swiperWidth, percentage);
       },
       onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
-        this.$lastSwiperIndex = e.detail.current;
         // console.log("onSwiperAnimationfinish", e.detail.current);
-        // this.setSwiperIndex(e.detail.current, true);
-      },
-      onSwiperItemPageScroll(dy : number) {
-        let top = this.pageScrollTop + dy
-
-        if (top > this.$headerHeight) { top = this.$headerHeight }
-        if (top < 0) { top = 0 }
-
-        this.pageScrollTop = top
+        this.$lastSwiperIndex = e.detail.current
+        this.setSwiperIndex(e.detail.current, true)
       },
       queryTabItemsSize() {
         this.$swiperTabsRect.length = 0;
@@ -186,7 +178,8 @@
   }
 
   .swiper-list {
-    height: 100%;
+    flex: 1;
+    /* height: 100%; */
   }
 
   .swiper-tabs {
-- 
GitLab