Harmony在线教育app平台开发开发日志——day7

C_J_W_

已于 2022-06-13 20:55:08 修改

阅读量275

点赞数

分类专栏：鸿蒙系统入门

于 2022-06-13 20:53:10 首次发布

本文链接：https://blog.csdn.net/C_J_W_/article/details/125267152

版权

加载界面跳过功能主页面设计导航栏路由跳转

关键词由CSDN通过智能技术生成

鸿蒙系统入门专栏收录该内容

7 篇文章 1 订阅

订阅专栏

完成加载界面的设计

完成主页面的设计和跳转功能以及导航栏的设计（可以点击跳过进行跳转到主页面）
在这里插入图片描述

在这里插入图片描述
加载页面代码

<div class="container">
<div style="width: 100%;justify-content: flex-end;">
    <text class="jump" οnclick="jump">
        跳过{{time}}s
    </text>
</div>
    <div class="company">
        <image src="common/images/isoftstoneedu.png">
        </image>
    </div>
</div>

import router from '@system.router';
export default {
    data: {
      time:3
    },
    onInit() {
       var intervalId = setInterval(() => {
            if(this.time>=1)
            {this.time--;}
            else
            {
                clearInterval(intervalId);
                router.replace(
                    {
                        uri: 'pages/MAINPAGE/MAINPAGE'
                    }
                )
            }
        }, 1000);
    },
    jump()
    {
        router.replace(
            {
                uri: 'pages/MAINPAGE/MAINPAGE'
            }
        )
    }
}

.container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url("common/images/welcome.jpg");
}
.jump{

    width: 68px;
    height: 28px;
    margin-right: 15px;
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    color: black;
    background-color: aliceblue;
    border-radius: 20px;
}
.company{
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 50px;
}
.company image{
    width: 50%;
    height: 100px;
    object-fit: contain;
}

1.默认首页面样式
在这里插入图片描述
2.进行页面的跳转

mainpage代码

<element src="../namebar/namebar.hml" name="namebar"></element>
<element src="../index/index.hml" name="index"></element>
<element src="../MY/MY.hml" name="my"></element>
<div class="container">

      <div>
          <block if="{{index == 0}}">
              <index>
              </index>
          </block>
          <block if="{{index==3}}">
              <my>
              </my>
          </block>
      </div>

    <namebar menus = "{{menus}}"@event-change-menu="changeMenu"></namebar>
</div>

export default {
    data: {
        index:0,
        menus:[
            {name:"首页",icon:"common/icon/home.png",activeicon:"common/icon/home-active.png"},
            {name:"学习",icon:"common/icon/study.png",activeicon:"common/icon/study-active.png"},
            {name:"消息",icon:"common/icon/message.png",activeicon:"common/icon/message-active.png"},
            {name:"我的",icon:"common/icon/my.png",activeicon:"common/icon/my-active.png"}


        ]
    },
    changeMenu(e){
        this.index = e.detail.index;
        console.log(this.index);
    }
}

导航栏代码

<div class="container">
    <toolbar style="position: fixed;bottom: 0px;">
        <toolbar-item for="{{menus}}" icon="{{index == $idx ? $item.activeicon : $item.icon}}"
            value = "{{$item.name}}"
                      grab:click="changeMenu({{$idx}})"
                      style="font-size: 14px;background-color:{{index == $idx ? '#A6A6A6':'#EBEBEB'}};color:{{index==$idx ? 'red':'black'}}"
                      
            >
        </toolbar-item>
    </toolbar>
</div>

export default {
    data: {
         index:0
    },
    props:["menus"],
    changeMenu(index){
        this.index=index;
        this.$emit("eventChangeMenu",{index:index});
    }
}