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

幻灯片控件:<image-animator></image-animator>

跑马灯控件:<marquee></marquee>

弹出提示框: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'
                });
            }
        }

}

 

主页面视图层:

<div class="container">
   <div class="topview">
       <!--幻灯片组件-->
       <image-animator class="image-animator" duration="5s" fixedsize="false" images="{{imgdatas}}">
       </image-animator>
   </div>
    <div class="contentview">
        <button onclick="showmenu">菜单</button>
    </div>
    <menu id="menueone" onselected="changemenu">
        <option value="太和殿">太和殿</option>
        <option value="养心殿">养心殿</option>
        <option value="乾清宫">乾清宫</option>
    </menu>
</div>

    主页面css属性设置:

文章后续内容和相关附件能够点击下面的原文连接前往学习
原文连接：https://harmonyos.51cto.com/posts/2968#bkwz

想了解更多关于鸿蒙的内容，请访问：

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

https://harmonyos.51cto.com/#bkwz