提示框,對話框，路由跳轉頁面，跑馬燈,幻燈片及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