From 1ab11e668111ae29f0f0c9f7ab0b29f564a806d7 Mon Sep 17 00:00:00 2001
From: wangyaqi <wangyaqi988@163.com>
Date: Mon, 25 Mar 2024 17:50:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E8=87=AA=E8=A1=8C?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=95=BF=E5=88=97=E8=A1=A8=E7=9A=84=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=A0=E4=BD=8D=E7=AC=A6=E9=AB=98=E5=BA=A6=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E6=97=B6=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  2 +-
 .../custom-long-list/custom-list-item.uvue    | 15 ++----
 .../custom-long-list/custom-list-view.uvue    | 19 ++++---
 .../custom-long-list/custom-long-list.uvue    | 54 +++++++++++++------
 4 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/pages.json b/pages.json
index 61fbb3d3..1f2e70b8 100644
--- a/pages.json
+++ b/pages.json
@@ -1274,7 +1274,7 @@
     {
       "path" : "pages/template/custom-long-list/custom-long-list",
       "style" : {
-        "navigationBarTitleText" : "",
+        "navigationBarTitleText" : "自行实现长列表组件",
         "enablePullDownRefresh" : false
       }
     }
diff --git a/pages/template/custom-long-list/custom-list-item.uvue b/pages/template/custom-long-list/custom-list-item.uvue
index 1bb145b4..b95c44ef 100644
--- a/pages/template/custom-long-list/custom-list-item.uvue
+++ b/pages/template/custom-long-list/custom-list-item.uvue
@@ -14,18 +14,13 @@
       }
     },
     inject: {
-      cachedSize: {
-        type: Map as PropType<Map<any, number>>,
-        default: () : Map<any, number> => {
-          return new Map<any, number>()
-        }
+      setCachedSize: {
+        type: Function as PropType<(item : any, size : number) => void>
       },
     },
     mounted() {
-      nextTick(() => {
-        uni.createSelectorQuery().in(this).select('.custom-list-item-box').boundingClientRect().exec((ret) => {
-          (this.cachedSize as Map<any, number>).set(this.item, (ret[0] as NodeInfo).height!)
-        })
+      uni.createSelectorQuery().in(this).select('.custom-list-item-box').boundingClientRect().exec((ret) => {
+        this.setCachedSize(this.item, (ret[0] as NodeInfo).height!)
       })
     }
   }
@@ -33,4 +28,4 @@
 
 <style>
 
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/template/custom-long-list/custom-list-view.uvue b/pages/template/custom-long-list/custom-list-view.uvue
index 731189f6..40677eb2 100644
--- a/pages/template/custom-long-list/custom-list-view.uvue
+++ b/pages/template/custom-long-list/custom-list-view.uvue
@@ -34,6 +34,9 @@
           })
         },
         deep: true
+      },
+      defaultItemSize() {
+        this.rearrange(this.lastScrollTop)
       }
     },
     data() {
@@ -47,11 +50,18 @@
         initialized: false,
         hasDefaultSize: false,
         defaultItemSize: 40,
+        lastScrollTop: 0,
       };
     },
     provide() {
       return {
-        cachedSize: this.cachedSize
+        setCachedSize: (item : any, size : number) => {
+          if (!this.hasDefaultSize) {
+            this.defaultItemSize = size
+            this.hasDefaultSize = true
+          }
+          this.cachedSize.set(item, size)
+        }
       }
     },
     created() {
@@ -72,6 +82,7 @@
           return
         }
         const scrollTop = e.detail.scrollTop
+        this.lastScrollTop = 0
         if (scrollTop < this.offsetThreshold[1] || scrollTop > this.offsetThreshold[2]) {
           this.rearrange(scrollTop)
         }
@@ -90,10 +101,6 @@
           const cachedItemSize = this.cachedSize.get(item)
           if (cachedItemSize != null) {
             itemSize = cachedItemSize
-            if (!this.hasDefaultSize) {
-              this.defaultItemSize = itemSize
-              this.hasDefaultSize = true
-            }
           }
           tempTotalHeight += itemSize
           if (tempTotalHeight >= this.offsetThreshold[0] && tempTotalHeight <= this.offsetThreshold[3]) {
@@ -112,4 +119,4 @@
 
 <style>
 
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/template/custom-long-list/custom-long-list.uvue b/pages/template/custom-long-list/custom-long-list.uvue
index 0117508d..638bc9c1 100644
--- a/pages/template/custom-long-list/custom-long-list.uvue
+++ b/pages/template/custom-long-list/custom-long-list.uvue
@@ -1,19 +1,25 @@
 <template>
-  <custom-list-view style="flex: 1;" :list="list" @scrolltoupper="scrolltoupper" @scroll="scroll">
-    <template v-slot:default="{items}">
-      <custom-list-item v-for="item in (items as Item[])" :item="item" :key="item.id" style="padding: 5px 10px;">
-        <view style="background-color: aqua;">{{item.title}}</view>
-        <view>{{item.content}}</view>
-      </custom-list-item>
-    </template>
-  </custom-list-view>
+  <view style="flex: 1;background-color: aliceblue;">
+    <page-head :title="title"></page-head>
+    <view class="tips">使用部分渲染优化列表初始元素较多时加载卡顿的问题，此示例中仅渲染滚动容器上下5屏的内容。适用于仅使用一个for循环创建所有列表项的场景。</view>
+    <custom-list-view style="flex: 1;" :list="list" @scrolltoupper="scrolltoupper" @scroll="scroll">
+      <template v-slot:default="{items}">
+        <custom-list-item class="item" v-for="item in (items as Item[])" :item="item" :key="item.id">
+          <view class="item-wrapper">
+            <view class="name"><text style="font-size: 14px;">{{item.name}}</text></view>
+            <view class="info"><text style="font-size: 12px; color: #999999;">{{item.info}}</text></view>
+          </view>
+        </custom-list-item>
+      </template>
+    </custom-list-view>
+  </view>
 </template>
 
 <script>
   type Item = {
     id : number
-    title : string
-    content : string
+    name : string
+    info : string
   }
   import CustomListView from "./custom-list-view"
   import CustomListItem from "./custom-list-item"
@@ -24,15 +30,16 @@
     },
     data() {
       return {
+        title: '自行实现长列表组件',
         list: [] as Item[]
       }
     },
     created() {
-      for (let i = 0; i < 1000; i++) {
+      for (let i = 0; i < 2000; i++) {
         this.list.push({
           id: i,
-          title: `title-` + i,
-          content: `Content-${i}: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+          name: `Wifi_` + i,
+          info: `信号强度: -${(Math.floor(Math.random() * 60) + 40)} db, 安全性: WPA/WPA2/WPA3-Personal`
         } as Item)
       }
     },
@@ -40,13 +47,28 @@
       scrolltoupper() {
         console.log('scroll top upper')
       },
-      scroll(e : UniScrollEvent) {
-        console.log('scroll', e)
+      scroll() {
+        // console.log('scroll')
       }
     }
   }
 </script>
 
 <style>
+  .tips {
+    margin: 10px;
+    border-radius: 5px;
+    padding: 10px;
+    background-color: white;
+  }
+
+  .item {
+    padding: 5px 10px;
+  }
 
-</style>
+  .item-wrapper {
+    padding: 10px;
+    border-radius: 5px;
+    background-color: white;
+  }
+</style>
\ No newline at end of file
-- 
GitLab