微信小程序WXML條件渲染怎么用

本文小編為大家詳細介紹“微信小程序WXML條件渲染怎么用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序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的值以后，畫面上的組件就會相應的顯示和隱藏。

讀到這里，這篇“微信小程序WXML條件渲染怎么用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。