回复
HarmonyOS应用开发-放大与缩小效果展现
鸿蒙时代
发布于 2022-4-8 10:09
浏览
1收藏
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.32K 29次下载
赞
2
收藏 1
回复
相关推荐