學習微信小程式WXML之列表渲染
阿新 • • 發佈:2019-01-29
<!-- index.wxml-->
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
<view>{{index}}:{{item.name}}</view>
</block>
</view>
//index.js
Page({
data:{
items:[
{ name:"商品A"},
{ name:"商品B"},
{ name:"商品C" },
{ name:"商品D"},
{ name:"商品A"}
]
}
})
block
標籤不是元件,只是一個包裝元素,在頁面渲染時可以看到這個標籤是不會被渲染出來的,只接受控制屬性,wx:if
和wx:for
等就是控制屬性。如果要一次性判斷或重複多個元件標籤,比如對多個view元件進行同一重複動作,可以使用一個<block/>
標籤將多個元件包裝起來。
- 通過
wx:for
來繫結名為items的陣列。效果相當於for迴圈,重複渲染該元件。也可以巢狀,下邊是一個九九乘法表。
<view wx:for ="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
- index變數是當前元素在數組裡的下標,也可以通過
wx:for-index
來指定陣列當前下標的變數名。使用wx:for-item
- 如果列表中專案的位置會動態改變或者有新的專案新增到列表中,並且希望列表中的專案保持自己的特徵和狀態(如
<input/>
中的輸入內容,<switch/>
的選中狀態),需要使用wx:key
來指定列表中專案的唯一的識別符號。 block wx:for
類似block wx:if
,也可以將wx:for
用在<block/>
標籤上,以渲染一個包含多節點的結構塊。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>