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(){ }}
创作打卡挑战赛 赢取流量/现金/CSDN周边激励大奖海量搞笑GIF动态图片