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

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

成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、蓬溪網(wǎng)站定制設(shè)計、自適應(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è)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為蓬溪等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

需求

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

提示音選擇畫面

計時器選擇畫面

實現(xiàn)方式

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

editaction.wxml

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

<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關(guān)鍵詞，結(jié)構(gòu)和其他語言中的if/else比較相似。具體的條件就是看action_index是否大于0。

editacion.js

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

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

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

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

bindActionTypeChange: function (e) {

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

   this.setData({

     action_index: e.detail.value

   })

 },

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

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

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

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

廣告

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