鸿蒙提示框，对话框，路由跳转页面，跑马灯，幻灯片及list组件的应用

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

幻灯片控件:

跑马灯控件:

弹出提示框:prompt.showToast()

弹出对话框:prompt.showDialog()

在制作提示框的时候,首先制作一个菜单栏选项,弹出菜单栏仅有当调试点击后才触发显示出来不占用原有视图空间.弹出菜单栏的位置默认以(0,0)为基准点,为了更好的用户体验,也可以自行设置弹出位置(如下图)

介绍一种跳转页面新方法:路由跳转页面(具体见代码): import router from '@system.router'; //通过路由跳转页面

router.push({ uri: 'pages/jumpone/jumpone'}) //路由的方法

主页面的js业务逻辑层:

 
 
 
   
  
  
  import prompt from '@system.prompt';   
  
  
  import router from '@system.router';  //路由  通过路由跳转页面   
  
  
  export default {   
  
  
      data: {   
  
  
          title: 'World',   
  
  
          imgdatas:[{   
  
  
                        "src":"http://ttjib3.natappfree.cc/images/12.jpeg"   
  
  
                    },   
  
  
                    {   
  
  
                        "src":"http://ttjib3.natappfree.cc/images/13.jpg"   
  
  
                    },   
  
  
                    {   
  
  
                       "src":"http://ttjib3.natappfree.cc/images/14.jpg"   
  
  
                    },   
  
  
                     {   
  
  
                        "src":"http://ttjib3.natappfree.cc/images/15.jpg"   
  
  
                    },   
  
  
                    {   
  
  
                     "src":"http://ttjib3.natappfree.cc/images/16.png"   
  
  
                 }]   
  
  
      },   
  
  
          showmenu() {   
  
  
              //弹出显示菜单    首先要获取这个组件用  this.$element   
  
  
     
  
  
              //this.$element("menueone").show();   
  
  
     
  
  
              //弹出的具体位置 默认时以(0,0)为基准点   
  
  
               this.$element("menueone").show({   
  
  
                 x:0,   
  
  
                   y:0   
  
  
             });   
  
  
          },   
  
  
          changemenu(e) {   
  
  
              let name = e.value //这里的value就是hml中的value   
  
  
              //鸿蒙的提示框   
  
  
              prompt.showToast({   
  
  
                  message:name   
  
  
              });   
  
  
              if (name == "太和殿")   
  
  
              {   
  
  
                  router.push({                   //路由的方法   
  
  
                      uri: 'pages/jumpone/jumpone'   
  
  
                  });   
  
  
              }   
  
  
              else if(name == "养心殿")   
  
  
              {   
  
  
                  router.push({                    //路由的方法   
  
  
                      uri: 'pages/jumptwo/jumptwo'   
  
  
                  });   
  
  
              }   
  
  
              else if(name == "乾清宫")   
  
  
              {   
  
  
                  router.push({                     //路由的方法   
  
  
                      uri: 'pages/jumpthree/jumpthree'   
  
  
                  });   
  
  
              }   
  
  
          }   
  
  
     
  
  
  }

主页面视图层:

菜单

.container {
width:100%;
height: 1200px;
display: flex;
flex-direction: column;
background-color: skyblue;
}
.topview{
width: 100%;
height: 30%;
border-bottom: 1px solid blue;
}
.image-animator{
width: 100%;
height: 100%;
}
.contentview{
width: 100%;
height: 10%;
background-color: white;
}

import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
changmes() {
//1.弹出提示框
// prompt.showToast()
//2.弹出对话框
prompt.showDialog({
title:"问题",
message:"你今年是否有600岁?",
buttons:[{"text":"是","color":"#000000"},{"text":"否","color":"#000000"}],
//用successs追踪对话框
success:function(data){
if(data.index==0){
prompt.showToast({
message:"你点击了是按钮"
})
}
if(data.index==1){
prompt.showToast({
message:"你点击了否按钮"
})
}
}
})
}
}

import router from '@system.router';
export default {
data: {
title: 'World',
listdatas:[{"cname":"故宫典藏","cimg":"/common/gugong.png","lname":[{"fname":"宫廷人物","icon":"/common/renwu.png"},{"fname":"宫廷典制","icon":"/common/gugong.png"},{"fname":"宫廷文创","icon":"/common/gongwenhua.png"},{"fname":"宫廷建筑","icon":"/common/gu.png"}]},
{"cname":"故宫文创","cimg":"/common/gugong.png","lname":[]},
{"cname":"故宫建筑","cimg":"/common/gugong.png","lname":[]},
{"cname":"故宫历史","cimg":"/common/gugong.png","lname":[]}
]
},
changemenu(e){
router.push({
uri:'pages/gugongwenchuang/gugongwenchuang'
})
}
}

{{$item.cname}}
{{cvalue.fname}}

.container {
width: 100%;
height: 1200px;
display: flex;
flex-direction: column;
background-color: skyblue;
}
.listview{
width: 100%;
height: 100%;
}
.group{
width: 100%;
}
.listitem{
width: 100%;
height: 25%;
display: flex;
justify-content:center;
align-items: center;
}
.img1{
width: 80px;
height: 80px;
}
.txt1{
font-size: 45px;
font-weight: bold;
font-family: sans-serif;
margin-left: 70px;
}
.txt2{
font-size: 35px;
font-family: sans-serif;
margin-left: 70px;
}
.listitem1{
width: 100%;
height: 18%;
display: flex;
justify-content:center;
align-items: center;
}