Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 347
Star 2
Fork 7
H
hello-uvue
提交 9dffe41e 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

refactor(component instance): nextTick

上级 a6efc4ed
隐藏空白更改
内联 并排
Showing with 0 addition and 244 deletion
pages.json
浏览文件 @ 9dffe41e
...@@ -377,13 +377,6 @@ ...@@ -377,13 +377,6 @@
"navigationBarTitleText": "nextTick" "navigationBarTitleText": "nextTick"
} }
}, },
{
"path": "pages/component-instance/nextTick-function/nextTick-function",
"style": {
"navigationBarTitleText": "$nextTick()"
}
},
{ {
"path": "pages/component-instance/methods/call-method-uni-element-options", "path": "pages/component-instance/methods/call-method-uni-element-options",
"style": { "style": {
......
pages/component-instance/nextTick-function/child.uvue 已删除 100644 → 0
浏览文件 @ a6efc4ed
<template>
<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,
nextTickBeforeWidth: 0,
nextTickBeforeHeight: 0,
nextTickAfterWidth: 0,
nextTickAfterHeight: 0,
}
},
mounted() {
this.nextTickCallback()
this.nextTickPromise()
},
methods: {
nextTickCallback() : void {
this.width = 100
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().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.$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().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;
}
.rect {
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
</style>
\ No newline at end of file
pages/component-instance/nextTick-function/nextTick-function.test.js 已删除 100644 → 0
浏览文件 @ a6efc4ed
const PAGE_PATH = '/pages/component-instance/nextTick-function/nextTick-function'
describe('$nextTick()', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
it('$nextTick() 回调方式', async () => {
const data = await page.data()
expect(data.nextTickBeforeWidth).toBe(100)
expect(data.nextTickAfterWidth).toBe(200)
});
it('$nextTick() Promise方式', async () => {
const data = await page.data()
expect(data.nextTickBeforeHeight).toBe(100)
expect(data.nextTickAfterHeight).toBe(200)
});
it('子组件 $nextTick() 回调方式', async () => {
const comp = await page.$('.next-tick-child')
const data = await comp.data()
expect(data.nextTickBeforeWidth).toBe(100)
expect(data.nextTickAfterWidth).toBe(200)
});
it('子组件 $nextTick() Promise方式', async () => {
const comp = await page.$('.next-tick-child')
const data = await comp.data()
expect(data.nextTickBeforeHeight).toBe(100)
expect(data.nextTickAfterHeight).toBe(200)
});
})
pages/component-instance/nextTick-function/nextTick-function.uvue 已删除 100644 → 0
浏览文件 @ a6efc4ed
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="page">
<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>
<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>
<next-tick-child class="next-tick-child"></next-tick-child>
</view>
<!-- #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().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.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;
}
.rect {
background-color: red;
}
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或