小程序WXML列表渲染

列表渲染

主要针对数组来做。

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

渲染数组

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

test.js:

data: {
       data1:1+2,
       data2:"hello"+ " world",
       data3:1+"hello",
       data4:[1,2,3,4]
  },

test.wxml:

<view wx:for="{{data4}}">
    {{item}}
</view>

如果我们想显示键值对的建，可以这样写：

<view wx:for="{{data4}}">
     {{index}}:{{item}}
</view>

渲染对象

test.js:

 data: {
       data1:1+2,
       data2:"hello"+ " world",
       data3:1+"hello",
       data4:[1,2,3,4],
       data5:{
          'a':'a',
          'b':3
       }
  },

test.wxml:

<view wx:for="{{data5}}">
    {{item}}
</view>

如果我们想显示键值对的建，可以这样写：

<view wx:for="{{data5}}">
    {{index}}:{{item}}
</view>

现在都是静态数据

对键值重命名

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名，即重命名。

这样做的好处是当循环嵌套时能区分不同的变量。

<view wx:for="{{data4}}" wx:for-index='idx'
wx:for-item='it'>
     {{idx}}:{{it}}
</view>

练习：用for循环打印26个英文字母

练习：用FOR循环打印周一~周天的中英文说法