1. 程式人生 > >學習微信小程式WXML之列表渲染

學習微信小程式WXML之列表渲染

<!-- 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:ifwx: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>