HarmonyOS应用开发-Img上一张下一张实现

一.创建项目
二.示例代码
(图片自备)
index.hml

<div class="container">
    <div class="img-div">
        <image class="img" src="{{imgArr[idx]}}"></image>
    </div>
    <text style="font-size:16px;width: 100%;text-align: center;">{{index}}</text>
    <div class="btn">
        <button value="上一张" onclick="upBtn(1)"></button>
        <button value="下一张" onclick="upBtn(2)"></button>
    </div>
</div>

index.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.img-div{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 210px;
}
.img{
    width: 300px;
    height: 200px;
}
.btn{
    width: 100%;
    height: 80px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}
.btn button{
    width: 90px;
    height: 30px;
}

index.js

import prompt from '@system.prompt';
export default {
    data: {
        idx:0,
        index:0,
        imgArr:[
            "/common/images/1.png",
            "/common/images/2.png",
            "/common/images/3.png",
            "/common/images/4.png",
            "/common/images/5.png",
        ]
    },
    onShow() {
    },
    upBtn(e){
        if (e == 1) {
            let idx = this.idx;
            let newIdx = idx -1;
            if (newIdx < 0) {
                console.log("已经是第一张")
                prompt.showToast({message:"已经是第一张"})
            }else{
                this.idx = newIdx;
            }
            console.log("下标是："+this.idx)
        }else if (e == 2) {
            let idx = this.idx;
            let newIdx = idx +1;
            if (newIdx > this.imgArr.length -1) {
                console.log("已经是最后一张")
                prompt.showToast({message:"已经是最后一张"})
            }else{
                this.idx = newIdx;
            }
            console.log("下标是："+this.idx)
        }
        this.index = this.idx

    },
    bottomBtn(){

    }
}

三.实例效果