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

    })

  }

})

運行：