学习微信小程序WXML之列表渲染

此贴为学习9 小时搞定微信小程序开发 的笔记
文档列表渲染 · 小程序

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

- 详见文档列表渲染 · 小程序。