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

    }
}