鸿蒙应用-呼吸训练app练习（续）

小嵌

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



图片1.png （43.49 KB, 下载次数: 0）

下载附件  保存到相册  

半小时前 上传

代码如下：

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

显示效果：



图片2.png （430.12 KB, 下载次数: 0）

下载附件  保存到相册  

半小时前 上传

代码如下：

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

jltfchangeAction1（pv）{

     console.log（“左边的选中选“+pv.newValue）;

    },

jltfchangeAction2（pv）{

     console.log（“右边的选中选“+pv.newValue）;

   },



图片3.png （123.96 KB, 下载次数: 0）

下载附件  保存到相册  

半小时前 上传

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



图片4.png （128.59 KB, 下载次数: 0）

下载附件  保存到相册  

半小时前 上传

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