文章详情

登录

短信预约-IT技能 免费直播动态提醒

• 地区
• 手机号
• 验证码获取验证

立即预约

选择考试省份

• 北京
• 上海
• 天津
• 重庆
• 河北
• 山东
• 辽宁
• 黑龙江
• 吉林
• 甘肃
• 青海
• 河南
• 江苏
• 湖北
• 湖南
• 江西
• 浙江
• 广东
• 云南
• 福建
• 海南
• 山西
• 四川
• 陕西
• 贵州
• 安徽
• 广西
• 内蒙
• 西藏
• 新疆
• 宁夏
• 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 11:54

关注

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

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

https://harmonyos.51cto.com/

幻灯片控件:

跑马灯控件:

弹出提示框: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"> 
   "topview"> 
       --幻灯片组件--> 
       "image-animator" duration="5s" fixedsize="false" images="{{imgdatas}}"> 
        
   

 

    "contentview"> 

        "showmenu">菜单 

    

主页面css属性设置:

.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; 
} 

跳转页面一的js业务逻辑层:

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:"你点击了否按钮" 
                       }) 
                   } 
            } 
        }) 
    } 
} 

 跳转页面一的视图层:

"container"> 
       "changmes">太和殿 
 

跳转页面二的视图层:

"container"> 
   
      最是一年春好处,绝胜烟柳满皇都 
   
 

跳转页面三的js业务逻辑层:

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' 
         }) 
    } 
} 

 跳转页面三的视图层:

"container"> 
    "listview"> 
        for="{{listdatas}}"> 
            group class="group">      --高度不需要给出 会自适应大小--> 
                "listitem"> 
                    "img1" src="{{$item.cimg}}"> 
                    "txt1">{{$item.cname}} 
                 
                for="{{(cindx,cvalue) in $item.lname}}"> 
                    "listitem1" onclick="changemenu"> 
                        "img1" src="{{cvalue.icon}}"> 
                        "txt2">{{cvalue.fname}} 
                     
                 
            group> 
         
     
 

跳转页面三的css属性设置:

.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; 
} 

 效果图如下,效果视频已上传专栏(HarmonyOS开发从0到1) https://harmonyos.51cto.com/column/35

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，请注明出处，否则将追究法律责任。

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

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

https://harmonyos.51cto.com/

首页课程

资料下载问答资讯