Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
05d1eb43
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
6005
Star
91
Fork
164
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
05d1eb43
编写于
5月 22, 2024
作者:
辛宝Otto
🥊
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 实现 ResizeObserver
上级
dfe23482
变更
4
显示空白变更内容
内联
并排
Showing
4 changed file
with
25 addition
and
25 deletion
+25
-25
pages.json
pages.json
+0
-2
pages/API/resize-observer/resize-observer.test.js
pages/API/resize-observer/resize-observer.test.js
+1
-9
pages/API/resize-observer/resize-observer.uvue
pages/API/resize-observer/resize-observer.uvue
+24
-12
pages/tabBar/API.uvue
pages/tabBar/API.uvue
+0
-2
未找到文件。
pages.json
浏览文件 @
05d1eb43
...
@@ -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"
:
...
...
pages/API/resize-observer/resize-observer.test.js
浏览文件 @
05d1eb43
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
()
=>
{
...
...
pages/API/resize-observer/resize-observer.uvue
浏览文件 @
05d1eb43
...
@@ -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!)
}
}
}
}
}
}
...
...
pages/tabBar/API.uvue
浏览文件 @
05d1eb43
...
@@ -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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录