返回发烧友论坛

发帖

[文章]HarmonyOS应用开发-放大与缩小效果展现

李洋水蛟龙

2022-04-08 10:52:14

阅读量

0

HarmonyOS

0

2

Hml

<div class="container">
<div class="box">
<div style="width: {{ widthVal }};height: {{ heightVal }};
flex-direction: row;
justify-content: space-around;
align-items: center;
border: 2px;
background-color: aquamarine;
">
<button style="width: 80px;height: 30px;" onclick="enlarge">放大</button>
<button style="width: 80px;height: 30px;" onclick="decrease">缩小</button>
</div>
</div>
</div>

复制代码

Css

.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.box{
flex-direction: column;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
}

复制代码

Js

import prompt from '@system.prompt';
let width = 200;
let height = 200;
export default {
data: {
widthVal:width,
heightVal:height,
},
enlarge(){
if (width < 400) {
width +=10;
height +=10;
this.widthVal = width
this.heightVal = height
}else {
prompt.showToast({message:"已经达到最大"})
}
},
decrease(){
if (width > 180) {
width -=10;
height -=10;
this.widthVal = width
this.heightVal = height
}else{
prompt.showToast({message:"不能再缩小了"})
}
},
}

复制代码

效果展示：

附件：

HarmonyOS应用开发-放大与缩小效果展现.docx

(55.32 KB, 下载次数: 0)

举报

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉