#2020征文-手表#鸿蒙应用-呼吸训练app练习（续4-5）

4．在主页面添加Logo和两个选择器

代码如下：

Index.hml文件中

<div class="jltfcontainer1">
    <div class="jltfcontainer2" >
        <picker-view class="jltfpv1" range="{{picker1range}}"/>
        <text class="jltftxt" >
         分
        </text>
        <image src="/common/hm.png" class="jltfimg"/>
        <picker-view class="jltfpv2" range="{{picker2range}}"/>
    </div>
    <input type="button" value="点我" class="jltfbtn" onclick="jltfclickAction"/>
</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()被调用")
    }
}

5.指定选择器的默认选中项并获取选中项的值

显示效果：

代码如下：

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

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

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

本部分练习部分参考了张荣超老师公开的代码。