From 56b9ae3fe8040ba3c2ca46fa182acedfa41164f9 Mon Sep 17 00:00:00 2001
From: wangyaqi <wangyaqi988@163.com>
Date: Tue, 23 Jan 2024 12:07:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20$nextTick=E6=B5=8B=E8=AF=95=E4=BE=8Bcrea?=
 =?UTF-8?q?teSelectorQuery=E5=BA=94=E4=BD=BF=E7=94=A8in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../nextTick-function/child.uvue              | 166 +++++++++---------
 .../nextTick-function/nextTick-function.uvue  | 128 +++++++-------
 2 files changed, 143 insertions(+), 151 deletions(-)

diff --git a/pages/component-instance/nextTick-function/child.uvue b/pages/component-instance/nextTick-function/child.uvue
index 8b86edd..1867409 100644
--- a/pages/component-instance/nextTick-function/child.uvue
+++ b/pages/component-instance/nextTick-function/child.uvue
@@ -1,100 +1,100 @@
 <template>
-    <view class="page">
-        <view class="rect" :style="{width: width, height: height}">child component</view>
-        <view class="row"></view>
-        <view class="row">
-            <text ref="text">$nextTick Before Width:</text>
-            <text>{{nextTickBeforeWidth}}</text>
-        </view>
-        <view class="row">
-            <text ref="text">$nextTick Before Height:</text>
-            <text>{{nextTickBeforeHeight}}</text>
-        </view>
-        <view class="row">
-            <text ref="text">$nextTick After Width:</text>
-            <text>{{nextTickAfterWidth}}</text>
-        </view>
-        <view class="row">
-            <text ref="text">$nextTick After Height:</text>
-            <text>{{nextTickAfterHeight}}</text>
-        </view>
+  <view class="page">
+    <view class="rect" :style="{width: width + 'px', height: height + 'px'}">child component</view>
+    <view class="row"></view>
+    <view class="row">
+      <text ref="text">$nextTick Before Width:</text>
+      <text>{{nextTickBeforeWidth}}</text>
     </view>
+    <view class="row">
+      <text ref="text">$nextTick Before Height:</text>
+      <text>{{nextTickBeforeHeight}}</text>
+    </view>
+    <view class="row">
+      <text ref="text">$nextTick After Width:</text>
+      <text>{{nextTickAfterWidth}}</text>
+    </view>
+    <view class="row">
+      <text ref="text">$nextTick After Height:</text>
+      <text>{{nextTickAfterHeight}}</text>
+    </view>
+  </view>
 </template>
 
 <script lang="ts">
-    export default {
-        name: "nextTickChild",
-        data() {
-            return {
-                value: 0,
-                width: 100,
-                height: 100,
+  export default {
+    name: "nextTickChild",
+    data() {
+      return {
+        value: 0,
+        width: 100,
+        height: 100,
 
-                nextTickBeforeWidth: 0,
-                nextTickBeforeHeight: 0,
-                nextTickAfterWidth: 0,
-                nextTickAfterHeight: 0,
-            }
-        },
-        mounted() {
-            this.nextTickCallback()
-            this.nextTickPromise()
-        },
-        methods: {
-            nextTickCallback(): void {
-                this.width = 100
+        nextTickBeforeWidth: 0,
+        nextTickBeforeHeight: 0,
+        nextTickAfterWidth: 0,
+        nextTickAfterHeight: 0,
+      }
+    },
+    mounted() {
+      this.nextTickCallback()
+      this.nextTickPromise()
+    },
+    methods: {
+      nextTickCallback() : void {
+        this.width = 100
 
-                this.$nextTick(() => {
-                    uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-                        const rect = ret[0] as NodeInfo
+        this.$nextTick(() => {
+          uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+            const rect = ret[0] as NodeInfo
 
-                        this.width = 200
-                        this.$nextTick(() => {
-                            uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-                                const newRect = ret[0] as NodeInfo
-                                this.nextTickAfterWidth = newRect.width!
-                            })
-                        })
+            this.width = 200
+            this.$nextTick(() => {
+              uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+                const newRect = ret[0] as NodeInfo
+                this.nextTickAfterWidth = newRect.width!
+              })
+            })
 
-                        this.nextTickBeforeWidth = rect.width!
-                    });
-                })
-            },
-            nextTickPromise(): void {
-                this.height = 100
+            this.nextTickBeforeWidth = rect.width!
+          });
+        })
+      },
+      nextTickPromise() : void {
+        this.height = 100
 
-                this.$nextTick().then(() => {
-                    uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-                        const rect = ret[0] as NodeInfo
+        this.$nextTick().then(() => {
+          uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+            const rect = ret[0] as NodeInfo
 
-                        this.height = 200
-                        this.$nextTick().then(() => {
-                            uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-                                const newRect = ret[0] as NodeInfo
-                                this.nextTickAfterHeight = newRect.height!
-                            })
-                        })
+            this.height = 200
+            this.$nextTick().then(() => {
+              uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+                const newRect = ret[0] as NodeInfo
+                this.nextTickAfterHeight = newRect.height!
+              })
+            })
 
-                        this.nextTickBeforeHeight = rect.height!
-                    });
-                })
-            }
-        }
+            this.nextTickBeforeHeight = rect.height!
+          });
+        })
+      }
     }
+  }
 </script>
 
 <style>
-    .row {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        margin-bottom: 10px;
-    }
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
 
-    .rect {
-        background-color: blue;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
+  .rect {
+    background-color: blue;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/component-instance/nextTick-function/nextTick-function.uvue b/pages/component-instance/nextTick-function/nextTick-function.uvue
index 91f8c96..ce64699 100644
--- a/pages/component-instance/nextTick-function/nextTick-function.uvue
+++ b/pages/component-instance/nextTick-function/nextTick-function.uvue
@@ -1,9 +1,9 @@
 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-    <!-- #endif -->
+  <!-- #endif -->
     <view class="page">
-      <view class="rect" :style="{ width: width, height: height }"></view>
+      <view class="rect" :style="{ width: width + 'px', height: height + 'px' }"></view>
       <view class="row"></view>
       <view class="row">
         <text ref="text">$nextTick Before Width:</text>
@@ -23,84 +23,76 @@
       </view>
       <next-tick-child class="next-tick-child"></next-tick-child>
     </view>
-    <!-- #ifdef APP -->
+  <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
 <script lang="ts">
-import child from './child.uvue'
-
-export default {
-  components: {
-    nextTickChild: child
-  },
-  data () {
-    return {
-      value: 0,
-      width: 100,
-      height: 100,
-
-      nextTickBeforeWidth: 0,
-      nextTickBeforeHeight: 0,
-      nextTickAfterWidth: 0,
-      nextTickAfterHeight: 0,
-    }
-  },
-  mounted () {
-    this.nextTickCallback()
-    this.nextTickPromise()
-  },
-  methods: {
-    nextTickCallback (): void {
-      this.width = 100
-
-      uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-        const rect = ret[0] as NodeInfo
-		
-		this.width = 200
-		
-        this.$nextTick(() => {
-          uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-            const newRect = ret[0] as NodeInfo
-            this.nextTickAfterWidth = newRect.width!
-          })
-        })
+  import child from './child.uvue'
 
-        this.nextTickBeforeWidth = rect.width!
-      });
+  export default {
+    components: {
+      nextTickChild: child
     },
-    nextTickPromise (): void {
-      this.height = 100
+    data() {
+      return {
+        value: 0,
+        width: 100,
+        height: 100,
 
-      uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-        const rect = ret[0] as NodeInfo
-
-		this.height = 200
-	  
-        this.$nextTick().then(() => {
-          uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
-            const newRect = ret[0] as NodeInfo
-            this.nextTickAfterHeight = newRect.height!
+        nextTickBeforeWidth: 0,
+        nextTickBeforeHeight: 0,
+        nextTickAfterWidth: 0,
+        nextTickAfterHeight: 0,
+      }
+    },
+    mounted() {
+      this.nextTickCallback()
+      this.nextTickPromise()
+    },
+    methods: {
+      nextTickCallback() : void {
+        this.width = 100
+        uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+          const rect = ret[0] as NodeInfo
+          this.width = 200
+          this.$nextTick(() => {
+            uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+              const newRect = ret[0] as NodeInfo
+              this.nextTickAfterWidth = newRect.width!
+            })
           })
-        })
-
-        this.nextTickBeforeHeight = rect.height!
-      });
+          this.nextTickBeforeWidth = rect.width!
+        });
+      },
+      nextTickPromise() : void {
+        this.height = 100
+        uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+          const rect = ret[0] as NodeInfo
+          this.height = 200
+          this.$nextTick().then(() => {
+            uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
+              const newRect = ret[0] as NodeInfo
+              this.nextTickAfterHeight = newRect.height!
+            })
+          })
+          this.nextTickBeforeHeight = rect.height!
+        });
+      }
     }
   }
-}
 </script>
 
 <style>
-.row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
 
-.rect {
-  background-color: red;
-}
-</style>
+  .rect {
+    background-color: red;
+  }
+</style>
\ No newline at end of file
-- 
GitLab