EA&UML日拱一卒-微信小程序實戰：位置鬧鈴 (8)-WXML條件渲染

需求

按照位置鬧鈴程序的設計，當設備接近或者離開某個區域時，可以播放提示音，也可觸發記時器動作。按照設計，我們的畫面是這樣的。

提示音選擇畫面

計時器選擇畫面

實現方式

一般來講，根據動作動作類型選擇後續設定內容有兩種方式，一種是控件本身不切換，修改控件的內容；另一種是根據需求切換控件的表示和非表示。這裏我們採用第二種方式。

editaction.wxml

WXML提供了一種條件渲染的方法，這種方法可以根據條件變量來決定控件是否顯示。在編輯動作畫面中是這樣應用的。

<view wx:if="{{action_index>0}}">

       <picker  bindchange="bindTimerChange" value="{{timer_index}}" range="{{timer_array}}">

         <view class="picker">

           定時器：{{timer_array[timer_index]}}

         </view>

       </picker>

   </view>

   <view wx:else>

       <picker  bindchange="bindMediaChange" value="{{media_index}}" range="{{media_array}}">

           <view class="picker">

            提示音：{{media_array[media_index]}}

           </view>

       </picker>

   </view>

這裏使用的是wx:if和wx:else關鍵詞，結構和其他語言中的if/else比較相似。具體的條件就是看action_index是否大於0。

editacion.js

action_index的值是在editaction.jsz中處理的。邏輯非常簡單。

首先，動作類型的選擇肢如下：

action_array: ['播放提示音', '啓動定時器', '停止定時器', '暫停定時器', '再開定時器'],

當用戶選擇動作類型時就會觸發下面的處理。

bindActionTypeChange: function (e) {

   console.log('editaction.js::bindActionTypeChange: ' + e.detail.value)

   this.setData({

     action_index: e.detail.value

   })

 },

如果選擇的動作類型爲播放提示音，則action_index就爲0，選擇其他設定計時器選項時action_index的值就會大於0。通過setData修改action_index的值以後，畫面上的組件就會相應的顯示和隱藏。

小程序代碼

最新代碼已經將代碼上傳到GitHub。

工程全體：

https://github.com/xueweiguo/alarmmap

editaction.wxml

https://raw.githubusercontent.com/xueweiguo/alarmmap/master/pages/editaction/editaction.wxml

editaction.js

https://raw.githubusercontent.com/xueweiguo/alarmmap/master/pages/editaction/editaction.js

寫在文章的最後