鸿蒙os页面跳转

最新推荐文章于 2024-05-15 04:06:49 发布

TA像未融化的糖

最新推荐文章于 2024-05-15 04:06:49 发布

阅读量255

点赞数

文章标签： harmonyos javascript html

本文链接：https://blog.csdn.net/weixin_52046806/article/details/125306022

版权

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}}'
οnclick="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代码

<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代码

<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代码

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

}

目录结构图：