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

feat: 实现 ResizeObserver

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