HarmonyOS應用開發例程-Img上一張下一張實現

一.創建項目
二.示例代碼
(圖片自備)
index.hml

{{index}}

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(){

    }
}