鴻蒙應(yīng)用-呼吸訓(xùn)練app練習(xí)（續(xù)）

小嵌

鴻蒙應(yīng)用-呼吸訓(xùn)練app練習(xí)（續(xù)）, 4．在主頁面添加Logo和兩個選擇器



圖片1.png （43.49 KB, 下載次數(shù): 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=“點(diǎn)我“ 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（）被調(diào)用“）

     },

     onReady（）{

         console.log（“主頁面的onReady（）被調(diào)用“）

     },

     onShow（）{

         console.log（“主頁面的onShow（）被調(diào)用“）

     },

     onDestroy（）{

         console.log（“主頁面的onDestroy（）被調(diào)用“）

     }

}

5.指定選擇器的默認(rèn)選中項(xiàng)并獲取選中項(xiàng)的值

顯示效果：



圖片2.png （430.12 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

半小時前 上傳

代碼如下：

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

jltfchangeAction1（pv）{

     console.log（“左邊的選中選“+pv.newValue）;

    },

jltfchangeAction2（pv）{

     console.log（“右邊的選中選“+pv.newValue）;

   },



圖片3.png （123.96 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

半小時前 上傳

在index.hml中添加選擇默認(rèn)項(xiàng)并點(diǎn)擊“onchange”事件



圖片4.png （128.59 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

半小時前 上傳

本部分練習(xí)部分參考了張榮超老師公開的代碼。