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

发布于 2020-12-10 19:06
浏览
0收藏

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

#2020征文-手表#鸿蒙应用-呼吸训练app练习(续4-5)-开源基础软件社区

代码如下:

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.指定选择器的默认选中项并获取选中项的值

显示效果:

#2020征文-手表#鸿蒙应用-呼吸训练app练习(续4-5)-开源基础软件社区

代码如下:

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

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

#2020征文-手表#鸿蒙应用-呼吸训练app练习(续4-5)-开源基础软件社区在index.hml中添加选择默认项并点击“onchange”事件

#2020征文-手表#鸿蒙应用-呼吸训练app练习(续4-5)-开源基础软件社区本部分练习部分参考了张荣超老师公开的代码。

 

 

已于2020-12-15 10:44:59修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐