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

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

需求

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

提示音選擇畫面

計(jì)時(shí)器選擇畫面

實(shí)現(xiàn)方式

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

editaction.wxml

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

           定時(shí)器：{{timer_array[timer_index]}}

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

這里使用的是wx:if和wx:else關(guān)鍵詞，結(jié)構(gòu)和其他語言中的if/else比較相似。具體的條件就是看action_index是否大于0。

editacion.js

action_index的值是在editaction.jsz中處理的。邏輯非常簡(jiǎn)單。

首先，動(dòng)作類型的選擇肢如下：

action_array: ['播放提示音', '啟動(dòng)定時(shí)器', '停止定時(shí)器', '暫停定時(shí)器', '再開定時(shí)器'],

當(dāng)用戶選擇動(dòng)作類型時(shí)就會(huì)觸發(fā)下面的處理。

bindActionTypeChange: function (e) {

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

   this.setData({

     action_index: e.detail.value

   })

 },

如果選擇的動(dòng)作類型為播放提示音，則action_index就為0，選擇其他設(shè)定計(jì)時(shí)器選項(xiàng)時(shí)action_index的值就會(huì)大于0。通過setData修改action_index的值以后，畫面上的組件就會(huì)相應(yīng)的顯示和隱藏。

讀到這里，這篇“微信小程序WXML條件渲染怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。