微信小程序開發實戰(3):條件渲染

  小程序的佈局支持直接在組件中使用條件渲染屬性,該屬性的語法以下:
<view wx:if="{{condition}}"> 知足條件 </view>
其中 wx:if 是一個控制屬性, condition 是條件表達式。若是 condition 的值爲 true ,則輸出 <view> 組件中的值。若是有多個條件,和 if 語句的條件同樣,中間能夠用 && 表示邏輯與,用 || 表示邏輯或。例如,下面的佈局代碼的 count 變量值若是小於 4 ,則輸出「數值比較小」,不然什麼也不會輸出。
<view wx:if="{{count < 4}}"> 數值比較小 </view>
wx:if 也能夠像 if 語句同樣,使用 else if else 。與 wx:if 對應的是 wx:elif wx:else 。下面的佈局代碼經過對 count 不一樣值的判斷,會輸出不一樣的字符串。讀者可自行設置 count 變量的值來控制輸出結果。
<view> <view wx:if="{{count < 4 && count > 0}}"> 數值比較小 </view> <view wx:elif="{{count == 100 || count == 300}}"> 固定數值 </view> <view wx:else> 其餘值 </view></view> 
若是在組件中使用 wx:if wx:elif ex:else ,只能控制當前的組件是否起做用。若是要控制多個組件,須要使用 <block> <block> 並非一個組件,它僅僅是一個包裝組件,使用方法相似於容器組件,在 <block> 中能夠放置任意多個組件。例如,下面的佈局代碼使用了 3 <block> 標籤,分別使用了 wx:if wx:elif wx:else 進行控制。若是 count 等於 2 ,則顯示 2 view count 等於 3 ,則顯示 3 view ,不然,則顯示 1 view
<view class="flex-row"> <block wx:if="{{count == 2}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> </block> <block wx:elif="{{count == 3}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> </block> <block wx:else> <view id="green" class="scroll-view-item bc_green"></view> </block></view>
count 分別爲 2 3 以及其餘值時,顯示的效果如圖 1 、圖 2 和圖 3 所示。

圖1  count == 2的效果

圖2  count == 3的效果

圖3  count == 5的效果
要注意的是, wx:elif wx:else 須要緊跟在 wx:if 後面。若是 wx:if 的條件知足,那麼後面的 wx:elif wx:else 都不會執行。若是用多個 wx:if ,只要條件知足,就都會執行。例如,下面的兩段佈局分別使用了 wx:if wx:elif 和兩個 wx:if
使用 wx:if wx:elif
<view class="flex-row"> <block wx:if="{{count < 5}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> </block> <block wx:elif="{{count == 3}}"> <view id="green" class="scroll-view-item bc_green" ></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> </block></view>
使用兩個 wx:if
<view class="flex-row"> <block wx:if="{{count < 5}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> </block> <block wx:if="{{count == 3}}"> <view id="green" class="scroll-view-item bc_green" ></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> </block></view>
很明顯,若是 count 等於 3 count < 5 count == 3 兩個條件都知足,若是使用 wx:elif ,只有使用 wx:if <block> 會執行,而若是使用兩個 wx:if ,兩個 <block> 都會執行,效果如圖 4 所示。

圖4  兩個wx:if的效果

往期回顧:
微信小程序開發實戰(1):容器組件
微信小程序開發實戰(2):添加廣告輪詢圖

掌握更多小程序開發以及其餘開發技巧,請長按識別下面二維碼:



本文分享自微信公衆號 - 極客起源(geekculture)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。小程序

相關文章
相關標籤/搜索