From afee51d9e9e458c596779219cf89ff7b3547b1c4 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Fri, 8 Nov 2024 18:07:24 +0800
Subject: [PATCH] =?UTF-8?q?scroll-sticky:=20=E8=B0=83=E6=95=B4=E4=B8=BA=20?=
 =?UTF-8?q?getBoundingClientRectAsync?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/scroll-sticky/scroll-sticky.uvue | 222 +++++++++---------
 1 file changed, 113 insertions(+), 109 deletions(-)

diff --git a/pages/template/scroll-sticky/scroll-sticky.uvue b/pages/template/scroll-sticky/scroll-sticky.uvue
index 060a3283..acde3eb7 100644
--- a/pages/template/scroll-sticky/scroll-sticky.uvue
+++ b/pages/template/scroll-sticky/scroll-sticky.uvue
@@ -1,127 +1,131 @@
 <template>
-	<scroll-view ref="scroll" @scroll="onScroll" class="page" rebound="false">
-		<view class="content-item">
-			<text class="text">向上滑动页面，体验元素吸顶效果。</text>
-		</view>
-		<view v-for="(item,index) in list" :key="index" class="content-item">
-			<text class="text">first content-{{item}}</text>
-		</view>
+  <scroll-view ref="scroll" @scroll="onScroll" class="page" rebound="false">
+    <view class="content-item">
+      <text class="text">向上滑动页面，体验元素吸顶效果。</text>
+    </view>
+    <view v-for="(item,index) in list" :key="index" class="content-item">
+      <text class="text">first content-{{item}}</text>
+    </view>
 
-		<view ref="sticky" class="search">
-			<view style="flex-direction: row;">
-				<image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
-				<text class="search-tip-text">请输入你要搜索的内容</text>
-			</view>
-			<text class="search-btn">搜索</text>
-		</view>
+    <view ref="sticky" class="search">
+      <view style="flex-direction: row;">
+        <image src="/static/template/scroll-fold-nav/search.png" style="width: 15px;" mode="widthFix"></image>
+        <text class="search-tip-text">请输入你要搜索的内容</text>
+      </view>
+      <text class="search-btn">搜索</text>
+    </view>
 
-		<view v-for="(item,index) in list" :key="index" class="content-item">
-			<text class="text">second content-{{item}}</text>
-		</view>
+    <view v-for="(item,index) in list" :key="index" class="content-item">
+      <text class="text">second content-{{item}}</text>
+    </view>
 
-		<view v-for="(item,index) in list" :key="index" class="content-item">
-			<text class="text">second content-{{item}}</text>
-		</view>
+    <view v-for="(item,index) in list" :key="index" class="content-item">
+      <text class="text">second content-{{item}}</text>
+    </view>
 
-	</scroll-view>
+  </scroll-view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
-				stickyTop: 0,
-				stickyTran: 0,
-				scrollTop: 0,
-				stickyNode: null as UniElement | null
-			}
-		},
-		methods: {
-			onScroll(e : ScrollEvent) {
-				if (e.detail.scrollTop > this.stickyTop) {
-					let stickyTran = e.detail.scrollTop - this.stickyTop;
-					if (stickyTran != this.stickyTran) {
-						this.stickyNode?.style?.setProperty('transform', 'translateY(' + stickyTran + 'px)');
-					}
-					this.stickyTran = stickyTran;
-				} else {
-					this.stickyNode?.style?.setProperty('transform', '');
-					this.stickyTran = 0;
-				}
-			},
-			back() {
-				uni.navigateBack({
-					success(result) {
-						console.log('navigateBack success', result.errMsg)
-					},
-					fail(error) {
-						console.log('navigateBack fail', error.errMsg)
-					},
-					complete(result) {
-						console.log('navigateBack complete', result.errMsg)
-					},
-				})
-			}
-		},
-		onLoad() {
-		},
-		onReady() {
-			this.stickyNode = this.$refs['sticky'] as UniElement;
-			// let rect = this.stickyNode?.getBoundingClientRect();
-			// this.stickyTop = rect?.top;
-			//this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top;
-			const stickyRect = (this.$refs['sticky'] as UniElement).getBoundingClientRect();
-      const scrollRect = (this.$refs['scroll'] as UniElement).getBoundingClientRect();
-			this.stickyTop = stickyRect.top - scrollRect.top;
-		}
-	}
+  export default {
+    data() {
+      return {
+        list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
+        stickyTop: 0,
+        stickyTran: 0,
+        scrollTop: 0,
+        stickyNode: null as UniElement | null
+      }
+    },
+    methods: {
+      onScroll(e : ScrollEvent) {
+        if (e.detail.scrollTop > this.stickyTop) {
+          let stickyTran = e.detail.scrollTop - this.stickyTop;
+          if (stickyTran != this.stickyTran) {
+            this.stickyNode?.style?.setProperty('transform', 'translateY(' + stickyTran + 'px)');
+          }
+          this.stickyTran = stickyTran;
+        } else {
+          this.stickyNode?.style?.setProperty('transform', '');
+          this.stickyTran = 0;
+        }
+      },
+      back() {
+        uni.navigateBack({
+          success(result) {
+            console.log('navigateBack success', result.errMsg)
+          },
+          fail(error) {
+            console.log('navigateBack fail', error.errMsg)
+          },
+          complete(result) {
+            console.log('navigateBack complete', result.errMsg)
+          },
+        })
+      },
+      async calcStickyTop() {
+        this.stickyNode = this.$refs['sticky'] as UniElement;
+        // let rect = this.stickyNode?.getBoundingClientRect();
+        // this.stickyTop = rect?.top;
+        //this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top;
+        const stickyRect = await (this.$refs['sticky'] as UniElement).getBoundingClientRectAsync();
+        const scrollRect = await (this.$refs['scroll'] as UniElement).getBoundingClientRectAsync();
+        this.stickyTop = stickyRect.top - scrollRect.top;
+        console.log(stickyRect, scrollRect);
+      }
+    },
+    onLoad() {
+    },
+    onReady() {
+      this.calcStickyTop()
+    }
+  }
 </script>
 
 <style>
-	.page {
-		flex: 1;
-		padding: 0 15px;
-		background-color: #f5f5f5;
-	}
+  .page {
+    flex: 1;
+    padding: 0 15px;
+    background-color: #f5f5f5;
+  }
 
-	.content-item {
-		padding: 15px;
-		margin: 5px 0;
-		background-color: #fff;
-		border-radius: 5px;
+  .content-item {
+    padding: 15px;
+    margin: 5px 0;
+    background-color: #fff;
+    border-radius: 5px;
 
-	}
+  }
 
-	.text {
-		font-size: 14px;
-		color: #666;
-		line-height: 20px;
-	}
+  .text {
+    font-size: 14px;
+    color: #666;
+    line-height: 20px;
+  }
 
-	.search {
-		background-color: #FFFFFF;
-		border: 1px solid #fbdf0d;
-		height: 35px;
-		border-radius: 100px;
-		margin: 0 12px;
-		padding: 8px;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		z-index: 100;
-	}
+  .search {
+    background-color: #FFFFFF;
+    border: 1px solid #fbdf0d;
+    height: 35px;
+    border-radius: 100px;
+    margin: 0 12px;
+    padding: 8px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 100;
+  }
 
-	.search-tip-text {
-		font-size: 12px;
-		color: #666;
-	}
+  .search-tip-text {
+    font-size: 12px;
+    color: #666;
+  }
 
-	.search-btn {
-		font-size: 12px;
-		background-color: #ff6900;
-		color: #FFF;
-		padding: 5px 8px;
-		border-radius: 100px;
-	}
+  .search-btn {
+    font-size: 12px;
+    background-color: #ff6900;
+    color: #FFF;
+    padding: 5px 8px;
+    border-radius: 100px;
+  }
 </style>
-- 
GitLab