鸿蒙os页面跳转
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代码
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代码
<toolbar-item for="{{tabbarItems}}"
icon='{{$idx==index?$item.sing: $item.img}}'
value='{{$item.name}}'
οnclick="jump($idx)" >
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代码
关于我们
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代码
欢迎来到梦开始的地方
{{num}}
//自定义
父组件slot内容
父组件slot-other内容
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代码
个人中心
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代码
新闻中心
news.js代码
export default {
data: {
title: ""
},
onInit() {
this.title = this.$t('strings.world');
}
}
目录结构图：
