本文小編為大家詳細介紹“微信小程序WXML條件渲染怎么用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“微信小程序WXML條件渲染怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、蓬溪網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、html5、商城網(wǎng)站建設、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設公司、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為蓬溪等各大城市提供網(wǎng)站開發(fā)制作服務。

需求

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

提示音選擇畫面

計時器選擇畫面

實現(xiàn)方式

一般來講，根據(jù)動作動作類型選擇后續(xù)設定內(nèi)容有兩種方式，一種是控件本身不切換，修改控件的內(nèi)容；另一種是根據(jù)需求切換控件的表示和非表示。這里我們采用第二種方式。

editaction.wxml

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

<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: ['播放提示音', '啟動定時器', '停止定時器', '暫停定時器', '再開定時器'],

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

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條件渲染怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：微信小程序WXML條件渲染怎么用
網(wǎng)頁地址：http://www.aaarwkj.com/article44/gihehe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、全網(wǎng)營銷推廣、手機網(wǎng)站建設、網(wǎng)站設計公司、域名注冊、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)