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

鸿蒙时代
发布于 2022-4-8 10:09
7438浏览
1收藏

HarmonyOS应用开发-放大与缩小效果展现-鸿蒙开发者社区
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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

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;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

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:"不能再缩小了"})

        }
    },
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

效果展示:
HarmonyOS应用开发-放大与缩小效果展现-鸿蒙开发者社区

分类
HarmonyOS应用开发-放大与缩小效果展现.docx 55.32K 29次下载
2
收藏 1
回复
举报
2
1


回复
    相关推荐