diff --git a/pages.json b/pages.json
index 61fbb3d373fd822138164e7f5f813324d5051b73..1f2e70b8baee15010ec2c21f7d3ba7e6190bbf85 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 1bb145b414305a25c46a9eab52ce37ec0d020ce2..b95c44ef4d79fa07101836cc39fb932b3f888fa6 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 731189f63a2078b52fbeecb02fd920e867a7aeec..40677eb24e182aadd26296a2726a26e3d3c8aab4 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 0117508d1d6dc4e490d0fcc34d6ddb8652c39d8e..638bc9c1ce3e5132a8ebb3325d97ca2ff59a7e30 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