From 3a160a1793419a2d7e0f0d545c9f51f595441adb Mon Sep 17 00:00:00 2001
From: wangyaqi <wangyaqi988@163.com>
Date: Fri, 22 Mar 2024 17:21:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E6=9D=BF=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=87=AA=E8=A1=8C=E5=AE=9E=E7=8E=B0=E9=95=BF?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   8 ++
 pages/tabBar/template.uvue                    |  69 ++++++-----
 .../custom-long-list/custom-list-item.uvue    |  36 ++++++
 .../custom-long-list/custom-list-view.uvue    | 115 ++++++++++++++++++
 .../custom-long-list/custom-long-list.uvue    |  52 ++++++++
 5 files changed, 249 insertions(+), 31 deletions(-)
 create mode 100644 pages/template/custom-long-list/custom-list-item.uvue
 create mode 100644 pages/template/custom-long-list/custom-list-view.uvue
 create mode 100644 pages/template/custom-long-list/custom-long-list.uvue

diff --git a/pages.json b/pages.json
index b69afe18..5a972ca5 100644
--- a/pages.json
+++ b/pages.json
@@ -1270,6 +1270,14 @@
       	"navigationBarTitleText": "ad",
       	"backgroundColor": "#F8F8F8"
       }
+    },
+    {
+      "path" : "pages/template/custom-long-list/custom-long-list",
+      "style" : 
+      {
+        "navigationBarTitleText" : "",
+        "enablePullDownRefresh" : false
+      }
     }
     // #endif
   ],
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 33360581..276ab8ee 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -65,18 +65,18 @@
               {
                 name: '顶部搜索框随时下移长列表',
                 url: 'long-list'
-              },
+              },
               // #ifdef APP-ANDROID || WEB
               {
                 name: '顶部banner长列表',
                 url: 'long-list2'
-              },
-              // #endif
-              // #ifdef APP-IOS
-              {
-                name: '顶部banner长列表',
-                url: 'long-list-nested'
-              },
+              },
+              // #endif
+              // #ifdef APP-IOS
+              {
+                name: '顶部banner长列表',
+                url: 'long-list-nested'
+              },
               // #endif
             ] as Page[],
           },
@@ -110,21 +110,28 @@
               },
             ] as Page[],
           },
-          // #ifdef APP
+          {
+            id: 'custom-long-list',
+            url: 'custom-long-list',
+            name: '自行实现长列表组件',
+            open: false,
+            pages: [] as Page[],
+          },
+          // #ifdef APP
           {
             id: 'custom-refresher',
             url: 'custom-refresher',
             name: '自定义下拉刷新',
             open: false,
             pages: [] as Page[],
-          },
-          {
-            id: 'pull-zoom-image',
-            url: 'pull-zoom-image',
-            name: '下拉缩放顶部封面图',
-            open: false,
-            pages: [] as Page[],
-          },
+          },
+          {
+            id: 'pull-zoom-image',
+            url: 'pull-zoom-image',
+            name: '下拉缩放顶部封面图',
+            open: false,
+            pages: [] as Page[],
+          },
           // #endif
           {
             id: 'swiper-vertical-video',
@@ -132,7 +139,7 @@
             name: '竖滑视频',
             open: false,
             pages: [] as Page[],
-          },
+          },
           // #ifdef APP
           {
             id: 'scroll-sticky',
@@ -140,7 +147,7 @@
             name: 'scroll-view自定义滚动吸顶',
             open: false,
             pages: [] as Page[],
-          },
+          },
           // #endif
           {
             id: 'half-screen',
@@ -170,7 +177,7 @@
             open: false,
             enable: true,
             pages: [] as Page[],
-          },
+          },
           // #ifdef APP
           {
             id: 'calendar',
@@ -190,16 +197,16 @@
             name: '分享示例',
             open: false,
             pages: [] as Page[],
-          },
-          // #endif
-          // #ifdef WEB
-          {
-            id: 'browser-canvas',
-            url: 'browser-canvas',
-            name: '如何使用浏览器 canvas',
-            open: false,
-            pages: [] as Page[],
-          },
+          },
+          // #endif
+          // #ifdef WEB
+          {
+            id: 'browser-canvas',
+            url: 'browser-canvas',
+            name: '如何使用浏览器 canvas',
+            open: false,
+            pages: [] as Page[],
+          },
           // #endif
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',
@@ -244,4 +251,4 @@
       },
     },
   }
-</script>
+</script>
diff --git a/pages/template/custom-long-list/custom-list-item.uvue b/pages/template/custom-long-list/custom-list-item.uvue
new file mode 100644
index 00000000..1bb145b4
--- /dev/null
+++ b/pages/template/custom-long-list/custom-list-item.uvue
@@ -0,0 +1,36 @@
+<template>
+  <view ref="box" class="custom-list-item-box">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: "custom-list-item",
+    props: {
+      item: {
+        type: Object as PropType<any>,
+        required: true
+      }
+    },
+    inject: {
+      cachedSize: {
+        type: Map as PropType<Map<any, number>>,
+        default: () : Map<any, number> => {
+          return new Map<any, number>()
+        }
+      },
+    },
+    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!)
+        })
+      })
+    }
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/pages/template/custom-long-list/custom-list-view.uvue b/pages/template/custom-long-list/custom-list-view.uvue
new file mode 100644
index 00000000..731189f6
--- /dev/null
+++ b/pages/template/custom-long-list/custom-list-view.uvue
@@ -0,0 +1,115 @@
+<template>
+  <scroll-view class="custom-list-view-scoll-view" v-bind="$attrs" ref="scroll" @scroll="onScroll">
+    <view class="custom-list-view-placeholder" :style="{ height: placeholderHeight + 'px' }">
+      <view class="custom-list-view-container" :style="{ top: containerTop + 'px' }">
+        <slot :items="items"></slot>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+  /**
+   * 使用限制
+   * - 容器大小变动时未刷新缓存的子元素大小
+   * - 不支持设置初始滚动位置
+   * - list数据内每一项不可以是基础类型
+   * - item不支持设置margin，会导致计算位置不准确
+   */
+  export default {
+    name: "custom-list-view",
+    props: {
+      list: {
+        type: Array as PropType<any[]>,
+        default: [] as any[]
+      }
+    },
+    watch: {
+      list: {
+        handler(list : any[]) {
+          this.cachedSize.forEach((_ : number, key : any) => {
+            if (!list.includes(key)) {
+              this.cachedSize.delete(key)
+            }
+          })
+        },
+        deep: true
+      }
+    },
+    data() {
+      return {
+        items: [] as any[],
+        containerTop: 0,
+        scrollElementHeight: 0,
+        placeholderHeight: 0,
+        offsetThreshold: [0, 0, 0, 0], // -5, -3, 3, 5 屏对应的offset
+        cachedSize: new Map<any, number>(),
+        initialized: false,
+        hasDefaultSize: false,
+        defaultItemSize: 40,
+      };
+    },
+    provide() {
+      return {
+        cachedSize: this.cachedSize
+      }
+    },
+    created() {
+      this.placeholderHeight = this.list.length * this.defaultItemSize
+    },
+    mounted() {
+      nextTick(() => {
+        uni.createSelectorQuery().in(this).select('.custom-list-view-scoll-view').boundingClientRect().exec((ret) => {
+          this.scrollElementHeight = (ret[0] as NodeInfo).height!
+          this.rearrange(0)
+          this.initialized = true
+        })
+      })
+    },
+    methods: {
+      onScroll(e : UniScrollEvent) {
+        if (!this.initialized) {
+          return
+        }
+        const scrollTop = e.detail.scrollTop
+        if (scrollTop < this.offsetThreshold[1] || scrollTop > this.offsetThreshold[2]) {
+          this.rearrange(scrollTop)
+        }
+      },
+      rearrange(scrollTop : number) {
+        this.offsetThreshold[0] = Math.max(scrollTop - this.scrollElementHeight * 5, 0)
+        this.offsetThreshold[1] = Math.max(scrollTop - this.scrollElementHeight * 3, 0)
+        this.offsetThreshold[2] = Math.min(scrollTop + this.scrollElementHeight * 4, this.placeholderHeight)
+        this.offsetThreshold[3] = Math.min(scrollTop + this.scrollElementHeight * 6, this.placeholderHeight)
+        const items = [] as any[]
+        let tempTotalHeight = 0
+        let containerTop = 0
+        for (let i = 0; i < this.list.length; i++) {
+          const item = this.list[i]
+          let itemSize = this.defaultItemSize
+          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]) {
+            items.push(item)
+          } else if (tempTotalHeight < this.offsetThreshold[0]) {
+            containerTop = tempTotalHeight
+          }
+        }
+        this.placeholderHeight = tempTotalHeight
+        this.items = items
+        this.containerTop = containerTop
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/pages/template/custom-long-list/custom-long-list.uvue b/pages/template/custom-long-list/custom-long-list.uvue
new file mode 100644
index 00000000..dbd1fb00
--- /dev/null
+++ b/pages/template/custom-long-list/custom-long-list.uvue
@@ -0,0 +1,52 @@
+<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>
+</template>
+
+<script>
+  type Item = {
+    id : number
+    title : string
+    content : string
+  }
+  import CustomListView from "./custom-list-view"
+  import CustomListItem from "./custom-list-item"
+  export default {
+    components: {
+      CustomListView,
+      CustomListItem
+    },
+    data() {
+      return {
+        list: [] as Item[]
+      }
+    },
+    created() {
+      for (let i = 0; i < 1000; 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.`
+        } as Item)
+      }
+    },
+    methods: {
+      scrolltoupper() {
+        console.log('scroll top upper')
+      },
+      scroll(e : UniScrollEvent) {
+        console.log('scroll', e)
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
-- 
GitLab