微信小程序wx:for、wx:for-item、wx:for-index的使用方法讲解

假如后台获取了一段数组数据，那么在前台的wxml中怎么循环输出呢？这就需要用到wx:for

假设有如下数据

menulist=[{ "id": "1", "name": "栏目1", "submenu":[{ "id": "11", "name": "栏目1下级1"},{ "id": "12", "name": "栏目1下级2"}] },
 { "id": "2", "name": "栏目2", "submenu":[{ "id": "21", "name": "栏目2下级1"},{ "id": "22", "name": "栏目2下级2"}] }]

如果要循环出一级栏目呢？

  <view wx:for="{{menulist}}" wx:for-item="item" wx:for-index="index">
      {{index}}:{{item.id}}{{item.name}}
  </view>

wx:for是循环数组，wx:for-item 可以指定数组当前元素的变量名，wx:for-index 可以指定数组当前下标的变量名

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

所以上面也可以简写为

  <view wx:for="{{menulist}}">
      {{index}}:{{item.id}}{{item.name}}
  </view>

如果要循环出一二级栏目呢？

 <view wx:for="{{menulist}}" wx:for-item="item">
 一级栏目：{item.id}}{{item.name}}
      <view  wx:for="{{item.submenu}}" wx:for-item="sub">
      二级栏目：{{sub.id}}{{sub.name}}
      </view>
  </view>

可以看出可以嵌套使用，区分了每个数组的变量。