Harmony实现页面跳转_@media screen and (device-type: tablet) and (orien

 

页面实现效果

 

datas代码

// common.datas.tabbarItem.js
export default [
    {
        img:'common/images/home.png',
        simg:'common/images/home_s.png',
        name:'首页'
    },
    {
        img:'common/images/hot.png',
        simg:'common/images/hot_s.png',
        name:'热点'
    },
    {
        img:'common/images/us.png',
        simg:'common/images/us_s.png',
        name:'社区'
    },
    {
        img:'common/images/me.png',
        simg:'common/images/me_s.png',
        name:'我'
    }
]

child.css代码

.tabbar {
   width:360px;
    height: 200px;
    border: 2px solid #333;
}

child.hml代码

<div class="container">
  <div class="box">
    <text>我是子组件</text>
    <slot></slot>
    <slot name="other"></slot>
    <button @click="changeFatherNum"> 点击修改</button>
  </div>
</div>

child.js代码

//import tabbarItems from '../../common/datas/tabbarItem.js';
export default {
    data:{
    //    tabbarItems
    },
    changeFatherNum(){
        this.$emit("changeFatherNum")
    }
    }

tabbar.css代码

.tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
}

tabbar.hml代码

<div class="container">
    <toolbar class="tabbar">
        <toolbar-item for="{{tabbarItems}}"
                      icon='{{$idx==index?$item.sing: $item.img}}'
                      value='{{$item.name}}'
                      onclick="jump($idx)" >
        </toolbar-item>
    </toolbar>
</div>

tabbar.js代码

import tabbarItems from '../../common/datas/tabbarItem.js';
import router from '@system.router';
export default {
    data:{
        tabbarItems
    },
   // props:["index"],
    props:{
        index:{
            type:Number,
            default(){
                return 0;
            }
        }
    },
    jump(index){
      /*  this.tabbarItems.forEach((item,index) => {
            item.img = tabbarItems[index].img;
        });
        this.tabbarItems[index].img = this.tabbarItems[index].simg;*/
        switch(index){
            case 0:
                router.push({
                    uri:"pages/index/index",
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
            break;
            case 1:
                router.push({
                    uri:"pages/news/index",
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
                break;
            case 2:
                router.push({
                    uri:"pages/about/index",
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
                break;
            case 3:
                router.push({
                    uri:"pages/me/index",
                    params:{
                        info:"这是路由传递的参数"
                    }
                });
                break;
        }
    }
}

about.css代码

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
 
.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}
 
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
 
@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
 
    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

about.hml代码

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <text class="title">
       关于我们
    </text>
    <comp index="2"></comp>
</div>

about.js代码

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

index.css代码

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
 
.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}
 
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
 
@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
 
    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

index.hml代码

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<element src='../../components/child/child.hml'></element>
<div class="container">
    <text class="title">
       欢迎来到梦开始的地方
    </text>
    <text>{{num}}</text>
    //自定义
    <child @change-father-num="changeNum">
        <text>父组件slot内容</text>
        <text slot="other">父组件slot-other内容</text>
    </child>
    <comp index="0"></comp>
</div>

index.js代码

export default {
    data: {
        title: "",
        num:0
    },
    changeNum(){
        this.num++;
    }
}

me.css代码

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
 
.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}
 
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
 
@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
 
    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

me.hml代码

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
 
<div class="container">
    <text class="title">
       个人中心
    </text>
    <comp index="3"></comp>
</div>

me.js代码

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

news.css代码

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
 
.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}
 
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
 
@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
 
    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}
 
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

news.hml代码

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <text class="title">
       新闻中心
    </text>
    <comp index="1"></comp>
</div>

news.js代码

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}