11.小程序之wx:if視圖層條件渲染
條件渲染
wx:if
在框架中,使用 wx:if="{{condition}}"
來判斷是否需要渲染該代碼塊:
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif
和 wx:else
來添加一個 else 塊:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因為 wx:if
是一個控制屬性,需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽,可以使用一個 <block/>
標簽將多個組件包裝起來,並在上邊使用 wx:if
控制屬性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
註意: <block/>
並不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。
示例:
wxml:使用view
<!--index.wxml-->
<button bindtap="EventHandle">按鈕</button>
<!-- wx:if -->
<view wx:if="{{boolean==true}}">
<view class="bg_black"></view>
</view>
<view wx:elif="{{boolean==false}}">
<view class="bg_red"></view>
</view>
wxss:
/**index.wxss**/
.bg_black {
height: 200rpx;
background: lightskyblue;
}
.bg_red {
height: 200rpx;
background: lightpink;
}
js:
// index.js
Page({
data: {
boolean:false
},
EventHandle: function(){
var bol = this.data.boolean;
this.setData({
boolean: !bol
})
}
})
運行:
續上:
把上面標註綠色部分的view改成block
wxml:使用block
<!--index.wxml-->
<button bindtap="EventHandle">按鈕</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}">
<view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
<view class="bg_red"></view>
</block>
運行:
續上:
增加一個wx:for做列表渲染
wxml:
<!--index.wxml-->
<button bindtap="EventHandle">按鈕</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}" wx:for="{{arr}}">
<view class="bg_black">內容:{{item}}</view>
</block>
<block wx:elif="{{boolean==false}}">
<view class="bg_red">無內容</view>
</block>
index.js:
// index.js
Page({
data: {
boolean:false,
arr: [1,2,3]
},
EventHandle: function(){
var bol = this.data.boolean;
this.setData({
boolean: !bol
})
}
})
運行:
編輯錯誤。
原因是wx:if不能與wx:for共用在一個組件上!
續上:
wx:if和wx:for必須分開使用
wxml:
<!--index.wxml-->
<button bindtap="EventHandle">按鈕</button>
<!-- wx:if -->
<block wx:if="{{boolean==true}}">
<block wx:for="{{arr}}">
<view class="bg_black">內容:{{item}}</view>
</block>
</block>
<block wx:elif="{{boolean==false}}">
<view class="bg_red">無內容</view>
</block>
wxss:
/**index.wxss**/
.bg_black {
height: 200rpx;
background: lightskyblue;
}
.bg_red {
height: 200rpx;
background: lightpink;
}
index.js:
// index.js
Page({
data: {
boolean:false,
arr: [1,2,3]
},
EventHandle: function(){
var bol = this.data.boolean;
this.setData({
boolean: !bol
})
}
})
運行:
11.小程序之wx:if視圖層條件渲染