HarmonyOS 鸿蒙Next应用-呼吸训练app练习（续4-5）

HarmonyOS 鸿蒙Next应用-呼吸训练app练习（续4-5） 4．在主页面添加Logo和两个选择器

代码如下： I ndex.hml 文件中

<div class="jltfcontainer1">
    <div class="jltfcontainer2" >
        <picker-view class="jltfpv1" range="{{picker1range}}"></picker-view>
        <text class="jltftxt">分</text>
        <image src="/common/hm.png" class="jltfimg"></image>
        <picker-view class="jltfpv2" range="{{picker2range}}"></picker-view>
    </div>
    <input type="button" value="点我" class="jltfbtn" onclick="jltfclickAction"></input>
</div>

Index.css 文件中

.jltfcontainer1 {
    flex-direction: column;
    width: 454px;
    height: 454px;
    justify-content: center;
    align-items: center;
}
.jltfcontainer2{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    width: 454px;
    height: 250px;
}
.jltfpv1{
    width: 30px;
    height: 250px;
}
.jltfpv2{
    width: 80px;
    height: 250px;
}
.jltftxt{
    text-align: center;
    width: 50px;
    height: 36px;
}
.jltfimg{
    width: 208px;
    height: 208px;
    margin-left: 15px;
    margin-right: 15px;
}
.jltfbtn{
    width: 200px;
    height: 50px;
}

Index.js 文件中

import router from '@system.router'

export default {
    data: {
        picker1range: ["1", "2", "3"],
        picker2range: ["较慢", "舒缓", "较快"]
    },
    jltfclickAction(){
        router.replace({
            uri:'pages/jltfxunlian/jltfxunlian'
        });
    },
    onInit(){
        console.log("主页面的onInit()被调用");
    },
    onReady(){
        console.log("主页面的onReady()被调用");
    },
    onShow(){
        console.log("主页面的onShow()被调用");
    },
    onDestroy(){
        console.log("主页面的onDestroy()被调用");
    }
}

1. 指定选择器的默认选中项并获取选中项的值 显示效果：

代码如下： 在 index.js 中加入如下代码但是要申明

jltfchangeAction1(pv){
    console.log("左边的选中选"+pv.newValue);
},
jltfchangeAction2(pv){
    console.log("右边的选中选"+pv.newValue);
},

在 index.hml 中添加选择默认项并点击“onchange”事件

<img class="previewableImage" src="https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/421/357/287/2850086000421357287.20201210182958.16638239690764474830591070940554:50001231000000:2800:2383C0C1A5B7C32101C6217673D871B53BDE46E810AA79D9A006BF634EDA5B9C.png">