提交 05d1eb43 编写于 作者: 辛宝Otto's avatar 辛宝Otto 🥊

feat: 实现 ResizeObserver

上级 dfe23482
......@@ -1434,7 +1434,6 @@
"backgroundColorContent": "#fffae8"
}
},
// #ifdef APP-ANDROID || WEB
{
"path" : "pages/API/resize-observer/resize-observer",
"style" :
......@@ -1442,7 +1441,6 @@
"navigationBarTitleText" : "resize observer"
}
},
// #endif
{
"path" : "pages/CSS/overflow/overflow-visible-event",
"style" :
......
describe('api-resize-observer', () => {
if (
!process.env.uniTestPlatformInfo.startsWith('android') &&
!process.env.uniTestPlatformInfo.startsWith('web')
) {
it('dummyTest', async () => {
expect(1).toBe(1)
})
return
}
let page
beforeAll(async () => {
......
......@@ -11,6 +11,8 @@
</view>
<button @click="revertBoxSize">还原修改前元素宽高</button>
<button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
<button @click='cancelListen'>停止监听</button>
<button @click='goOnListen'>恢复监听</button>
<view>
<text class="info-text">蓝色方块元素:</text>
<view class="info-item">
......@@ -47,6 +49,7 @@
onReady() {
if (this.resizeObserver == null) {
this.resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
entries.forEach(entry => {
if (entry.target == this.outBoxElement) {
this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry)
......@@ -91,7 +94,7 @@
}
},
//自动化测试专用
setOutBoxMarginLeft(value: string) {
setOutBoxMarginLeft(value : string) {
if (this.outBoxElement != null) {
this.outBoxElementOnResize = false
this.outBoxElement!.style.setProperty("margin-left", value)
......@@ -108,6 +111,15 @@
"contentBoxSize: \n{blockSize:" + contentBoxSize.blockSize + ", inlineSize:" + contentBoxSize.inlineSize + "}\n" +
"devicePixelContentBoxSize: \n{blockSize:" + devicePixelContentBoxSize.blockSize + ", inlineSize:" + devicePixelContentBoxSize.inlineSize + "}\n" +
"contentRect: \n{x:" + entry.contentRect.x + ", y:" + entry.contentRect.y + ", width:" + entry.contentRect.width + ", height:" + entry.contentRect.height + "}"
},
cancelListen(){
// this.resizeObserver?.unobserve()
this.resizeObserver!.unobserve(this.outBoxElement!)
this.resizeObserver!.unobserve(this.innerBoxElement!)
},
goOnListen(){
this.resizeObserver!.observe(this.outBoxElement!)
this.resizeObserver!.observe(this.innerBoxElement!)
}
}
}
......
......@@ -172,12 +172,10 @@
api: ["Element.takeSnapshot"]
},
// #endif
// #ifdef APP-ANDROID || WEB
{
name: 'element大小变化监听',
url: 'resize-observer'
},
// #endif
{
name: 'node节点',
url: 'nodes-info',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册