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

描述

HarmonyOS

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


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

    }
}
打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分