> 文档中心 > HarmonyOS应用开发-Img上一张下一张实现

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  this.imgArr.length -1) {  console.log("已经是最后一张")  prompt.showToast({message:"已经是最后一张"})     }else{  this.idx = newIdx;     }     console.log("下标是:"+this.idx) } this.index = this.idx    },    bottomBtn(){    }}

HarmonyOS应用开发-Img上一张下一张实现 创作打卡挑战赛 HarmonyOS应用开发-Img上一张下一张实现 赢取流量/现金/CSDN周边激励大奖海量搞笑GIF动态图片