HarmonyOS开发案例 router路由-数据传输

来源: 鸿蒙时代 作者:鸿蒙时代 2022-03-31 15:35:03

  效果展示:

  1.建立项目包
2.创建文件

  3.代码部分:
4.显示部分:

  Index.hml

 
  
记录
时间:{{ time }}地点:{{ address }}人员:{{ personal }}

  Index.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.boxs{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.text {
    font-size: 20px;
    color: #333;
    opacity: 0.9;
    margin-bottom: 10px;
    margin-left: 20px;
}

  Index.js

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.boxs{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.text {
    font-size: 20px;
    color: #333;
    opacity: 0.9;
    margin-bottom: 10px;
    margin-left: 20px;
}

  输入记录部分:
Tuoter.hml

 
  
输入记录

  Touter.css

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}
.box{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    width: 100%;
}

  Touter.js

import router from '@system.router';
export default {
    data:{
        time:"",
        address:"",
        personal:"",
    },
    getChange(e){
        let idName = e.target.id
        if (idName === "1") {
            this.time = e.value
        }else if (idName === "2") {
            this.address = e.value
        }else if (idName === "3") {
            this.personal = e.value
        }
    },
    btnClick(){
        router.push({
            uri:"pages/index/index",
            params:{
                time:this.time,
                address:this.address,
                personal:this.personal,
            }
        })
    }
}
0
收藏
0