1 HarmonyOS应用开发-Img上一张下一张实现 - HarmonyOS技术社区 - 电子技术论坛 - 广受欢迎的专业电子论坛 - 德赢Vwin官网
返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-Img上一张下一张实现

李洋水蛟龙
2022-05-18 10:21:00
阅读量0
HarmonyOS
1
5
１.png

一. 创建项目
二. 示例代码
(图片自备)
index.hml
  1. <div class="container">
  2.     <div class="img-div">
  3.         <image class="img" src="{{imgArr[idx]}}"></image>
  4.     </div>
  5.     <text style="font-size:16px;width: 100%;text-align: center;">{{index}}</text>
  6.     <div class="btn">
  7.         <button value="上一张" onclick="upBtn(1)"></button>
  8.         <button value="下一张" onclick="upBtn(2)"></button>
  9.     </div>
  10. </div>
复制代码

index.css
  1. .container {
  2.     flex-direction: column;
  3.     justify-content: center;
  4.     align-items: center;
  5.     width: 100%;
  6.     height: 100%;
  7. }
  8. .img-div{
  9.     flex-direction: row;
  10.     align-items: center;
  11.     justify-content: center;
  12.     width: 100%;
  13.     height: 210px;
  14. }
  15. .img{
  16.     width: 300px;
  17.     height: 200px;
  18. }
  19. .btn{
  20.     width: 100%;
  21.     height: 80px;
  22.     flex-direction: row;
  23.     align-items: center;
  24.     justify-content: space-around;
  25. }
  26. .btn button{
  27.     width: 90px;
  28.     height: 30px;
  29. }
复制代码

index.js
  1. import prompt from '@system.prompt';
  2. export default {
  3.     data: {
  4.         idx:0,
  5.         index:0,
  6.         imgArr:[
  7.             "/common/images/1.png",
  8.             "/common/images/2.png",
  9.             "/common/images/3.png",
  10.             "/common/images/4.png",
  11.             "/common/images/5.png",
  12.         ]
  13.     },
  14.     onShow() {
  15.     },
  16.     upBtn(e){
  17.         if (e == 1) {
  18.             let idx = this.idx;
  19.             let newIdx = idx -1;
  20.             if (newIdx < 0) {
  21.                 console.log("已经是第一张")
  22.                 prompt.showToast({message:"已经是第一张"})
  23.             }else{
  24.                 this.idx = newIdx;
  25.             }
  26.             console.log("下标是："+this.idx)
  27.         }else if (e == 2) {
  28.             let idx = this.idx;
  29.             let newIdx = idx +1;
  30.             if (newIdx > this.imgArr.length -1) {
  31.                 console.log("已经是最后一张")
  32.                 prompt.showToast({message:"已经是最后一张"})
  33.             }else{
  34.                 this.idx = newIdx;
  35.             }
  36.             console.log("下标是："+this.idx)
  37.         }
  38.         this.index = this.idx

  40.     },
  41.     bottomBtn(){

  43.     }
  44. }
复制代码

三. 实例效果
附件：
HarmonyOS应用开发-Img上一张下一张实现.docx
(286.36 KB, 下载次数: 0)

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表德赢Vwin官网 网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友