Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 059605c2 编写于 作者: shutao-dc's avatar shutao-dc
浏览文件
操作

update resize-observer.uvue

上级 a7fe3f6c
隐藏空白更改
内联 并排
Showing with 111 addition and 90 deletion
pages/API/resize-observer/resize-observer.uvue
浏览文件 @ 059605c2
<template> <template>
<view> <view>
<text>点击蓝色或红色方块区域会修改元素宽高</text> <text>点击蓝色或红色方块区域会修改元素宽高</text>
<view v-show="boxDisplay" style="align-items: center; justify-content: center; margin: 10px;"> <view v-show="boxDisplay" style="align-items: center; justify-content: center; margin: 10px;">
<view style="width: 140px; height: 140px; background-color: blue; align-items: center; justify-content: center; padding: 5px;" id="outBox" @click="outBoxClick"> <view
<view style="width: 80px; height: 80px; background-color: red; padding: 5px;" id="innerBox" @click="innerBoxClick"></view> style="width: 140px; height: 140px; background-color: blue; align-items: center; justify-content: center; padding: 5px;"
</view> id="outBox" @click="outBoxClick">
</view> <view style="width: 80px; height: 80px; background-color: red; padding: 5px;" id="innerBox"
<button @click="revertBoxSize">还原修改前元素宽高</button> @click="innerBoxClick"></view>
<button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button> </view>
<view> </view>
<text class="info-text">蓝色方块元素:</text> <button @click="revertBoxSize">还原修改前元素宽高</button>
<view class="info-item"> <button @click="toggleDisplay">{{boxDisplay? '隐藏元素': '显示元素'}}</button>
<text class="info-text">{{outBoxSizeInfo}}</text> <view>
</view> <text class="info-text">蓝色方块元素:</text>
<text class="info-text" style="margin-top: 20px;">红色方块元素:</text> <view class="info-item">
<view class="info-item"> <text class="info-text">{{outBoxSizeInfo}}</text>
<text class="info-text">{{innerBoxSizeInfo}}</text> </view>
</view> <text class="info-text" style="margin-top: 20px;">红色方块元素:</text>
</view> <view class="info-item">
</view> <text class="info-text">{{innerBoxSizeInfo}}</text>
</template> </view>
</view>
<script> </view>
export default { </template>
data() {
return { <script>
outBoxSizeInfo: "", export default {
innerBoxSizeInfo: "", data() {
offset: 2, return {
boxDisplay: true, outBoxSizeInfo: "",
outBoxElement: null as UniElement | null, innerBoxSizeInfo: "",
innerBoxElement: null as UniElement | null, offset: 2,
} boxDisplay: true,
}, outBoxElement: null as UniElement | null,
onShow() { innerBoxElement: null as UniElement | null,
const resizeObserver = new UniResizeObserver((entries: Array<UniResizeObserverEntry>) => { resizeObserver: null as UniResizeObserver | null
entries.forEach(entry =>{ }
if(entry.target == this.outBoxElement) { },
this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry) onBackPress() : boolean {
} else if(entry.target == this.innerBoxElement) { if (this.resizeObserver != null) {
this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry) this.resizeObserver!.disconnect()
} }
}) return false
}) },
this.outBoxElement = uni.getElementById("outBox") onShow() {
resizeObserver.observe(this.outBoxElement) if (this.resizeObserver == null) {
this.innerBoxElement = uni.getElementById("innerBox") this.resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
resizeObserver.observe(this.innerBoxElement) entries.forEach(entry => {
}, if (entry.target == this.outBoxElement) {
methods: { this.outBoxSizeInfo = this.analysisResizeObserverEntry(entry)
innerBoxClick() { } else if (entry.target == this.innerBoxElement) {
this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth+this.offset) this.innerBoxSizeInfo = this.analysisResizeObserverEntry(entry)
this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth+this.offset) }
}, })
outBoxClick() { })
this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth+this.offset) this.outBoxElement = uni.getElementById("outBox")
this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth+this.offset) if (this.outBoxElement != null) {
}, this.resizeObserver!.observe(this.outBoxElement)
revertBoxSize() { }
if(this.outBoxElement != null) { this.innerBoxElement = uni.getElementById("innerBox")
this.outBoxElement!.style.setProperty("width", "140px") if (this.innerBoxElement != null) {
this.outBoxElement!.style.setProperty("height", "140px") this.resizeObserver!.observe(this.innerBoxElement)
} }
if(this.innerBoxElement != null) { }
this.innerBoxElement!.style.setProperty("width", "80px") },
this.innerBoxElement!.style.setProperty("height", "80px") methods: {
} innerBoxClick() {
}, if (this.innerBoxElement != null) {
toggleDisplay() { this.innerBoxElement!.style.setProperty("width", this.innerBoxElement!.offsetWidth + this.offset)
this.boxDisplay = !this.boxDisplay this.innerBoxElement!.style.setProperty("height", this.innerBoxElement!.offsetWidth + this.offset)
}, }
analysisResizeObserverEntry(entry: UniResizeObserverEntry): string { },
const contentBoxSize = entry.contentBoxSize[0] outBoxClick() {
const borderBoxSize = entry.borderBoxSize[0] if (this.outBoxElement != null) {
const devicePixelContentBoxSize = entry.devicePixelContentBoxSize[0] this.outBoxElement!.style.setProperty("width", this.outBoxElement!.offsetWidth + this.offset)
return "borderBoxSize: \n{blockSize:"+borderBoxSize.blockSize+", inlineSize:"+borderBoxSize.inlineSize+"}\n"+ this.outBoxElement!.style.setProperty("height", this.outBoxElement!.offsetWidth + this.offset)
"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+"}" revertBoxSize() {
} if (this.outBoxElement != null) {
} this.outBoxElement!.style.setProperty("width", "140px")
} this.outBoxElement!.style.setProperty("height", "140px")
</script> }
if (this.innerBoxElement != null) {
<style> this.innerBoxElement!.style.setProperty("width", "80px")
.info-item { this.innerBoxElement!.style.setProperty("height", "80px")
flex-direction: row; }
},
toggleDisplay() {
this.boxDisplay = !this.boxDisplay
},
analysisResizeObserverEntry(entry : UniResizeObserverEntry) : string {
const contentBoxSize = entry.contentBoxSize[0]
const borderBoxSize = entry.borderBoxSize[0]
const devicePixelContentBoxSize = entry.devicePixelContentBoxSize[0]
return "borderBoxSize: \n{blockSize:" + borderBoxSize.blockSize + ", inlineSize:" + borderBoxSize.inlineSize + "}\n" +
"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 + "}"
}
}
} }
</script>
<style>
.info-item {
flex-direction: row;
}
.info-text { .info-text {
font-size: 14px; font-size: 14px;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或