提交 56b9ae3f 编写于 作者: 雪洛's avatar 雪洛

fix: $nextTick测试例createSelectorQuery应使用in

上级 62271135
<template> <template>
<view class="page"> <view class="page">
<view class="rect" :style="{width: width, height: height}">child component</view> <view class="rect" :style="{width: width + 'px', height: height + 'px'}">child component</view>
<view class="row"></view> <view class="row"></view>
<view class="row"> <view class="row">
<text ref="text">$nextTick Before Width:</text> <text ref="text">$nextTick Before Width:</text>
...@@ -41,16 +41,16 @@ ...@@ -41,16 +41,16 @@
this.nextTickPromise() this.nextTickPromise()
}, },
methods: { methods: {
nextTickCallback(): void { nextTickCallback() : void {
this.width = 100 this.width = 100
this.$nextTick(() => { this.$nextTick(() => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => { uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
const rect = ret[0] as NodeInfo const rect = ret[0] as NodeInfo
this.width = 200 this.width = 200
this.$nextTick(() => { this.$nextTick(() => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => { uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
const newRect = ret[0] as NodeInfo const newRect = ret[0] as NodeInfo
this.nextTickAfterWidth = newRect.width! this.nextTickAfterWidth = newRect.width!
}) })
...@@ -60,16 +60,16 @@ ...@@ -60,16 +60,16 @@
}); });
}) })
}, },
nextTickPromise(): void { nextTickPromise() : void {
this.height = 100 this.height = 100
this.$nextTick().then(() => { this.$nextTick().then(() => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => { uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
const rect = ret[0] as NodeInfo const rect = ret[0] as NodeInfo
this.height = 200 this.height = 200
this.$nextTick().then(() => { this.$nextTick().then(() => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => { uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
const newRect = ret[0] as NodeInfo const newRect = ret[0] as NodeInfo
this.nextTickAfterHeight = newRect.height! this.nextTickAfterHeight = newRect.height!
}) })
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="page"> <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"></view>
<view class="row"> <view class="row">
<text ref="text">$nextTick Before Width:</text> <text ref="text">$nextTick Before Width:</text>
...@@ -29,13 +29,13 @@ ...@@ -29,13 +29,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import child from './child.uvue' import child from './child.uvue'
export default { export default {
components: { components: {
nextTickChild: child nextTickChild: child
}, },
data () { data() {
return { return {
value: 0, value: 0,
width: 100, width: 100,
...@@ -47,60 +47,52 @@ export default { ...@@ -47,60 +47,52 @@ export default {
nextTickAfterHeight: 0, nextTickAfterHeight: 0,
} }
}, },
mounted () { mounted() {
this.nextTickCallback() this.nextTickCallback()
this.nextTickPromise() this.nextTickPromise()
}, },
methods: { methods: {
nextTickCallback (): void { nextTickCallback() : void {
this.width = 100 this.width = 100
uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
const rect = ret[0] as NodeInfo const rect = ret[0] as NodeInfo
this.width = 200 this.width = 200
this.$nextTick(() => { this.$nextTick(() => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => { uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
const newRect = ret[0] as NodeInfo const newRect = ret[0] as NodeInfo
this.nextTickAfterWidth = newRect.width! this.nextTickAfterWidth = newRect.width!
}) })
}) })
this.nextTickBeforeWidth = rect.width! this.nextTickBeforeWidth = rect.width!
}); });
}, },
nextTickPromise (): void { nextTickPromise() : void {
this.height = 100 this.height = 100
uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => {
const rect = ret[0] as NodeInfo const rect = ret[0] as NodeInfo
this.height = 200 this.height = 200
this.$nextTick().then(() => { this.$nextTick().then(() => {
uni.createSelectorQuery().select('.rect').boundingClientRect(null).exec((ret: Array<any>) => { uni.createSelectorQuery().in(this).select('.rect').boundingClientRect(null).exec((ret : Array<any>) => {
const newRect = ret[0] as NodeInfo const newRect = ret[0] as NodeInfo
this.nextTickAfterHeight = newRect.height! this.nextTickAfterHeight = newRect.height!
}) })
}) })
this.nextTickBeforeHeight = rect.height! this.nextTickBeforeHeight = rect.height!
}); });
} }
} }
} }
</script> </script>
<style> <style>
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
} }
.rect { .rect {
background-color: red; background-color: red;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册