1. 程式人生 > >11.小程序之wx:if視圖層條件渲染

11.小程序之wx:if視圖層條件渲染

內容 code this tro -name condition 視圖 block 添加

條件渲染

wx:if

在框架中,使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊:

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elifwx: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視圖層條件渲染