小程序-for循环遍历的使用

.js文件：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    datas:[
      { title: '提交申请', txt: '选择服务类型，填写基本信息，提交' },
      { title: '材料审核', txt: '收到电网企业电话，与电网客户经理预约实地勘探时间、准备证明材料' },
      { title: '等待业扩配套项目施工', txt: '工作人员按约定时间上门装表接电' },
      { title: '竣工验收', txt: '工作人员按约定时间上门竣工验收' },
      { title: '上门安装', txt:'工作人员按约定时间上门装表接电'}
    ]
  }
})

.wxml文件：

<view class='neir' wx:for="{{datas}}" wx:key="title">
   <!-- 索引为index -->
   <text>{{index+1}}</text>
   <text>{{item.title}}</text>
   <view>{{item.txt}}</view>
</view>

释：关于wx:for的使用，相信用过angular.js和vue.js等框架的小伙伴们一眼就可以看出来了，没错，它们的用法其实是一样的，这里我们需要注意的是wx:key的使用

1、wx:key="字符串"

这个”字符串”代表在 for 循环的 datas中 item 的某个“属性”，比如这里的title和txt。

2、wx:key="*this"

这个关键字（*this）代表在 for 循环中的 item 本身，一般在没有键的数组里面使用，比如这个数组

arr: [1,2,3,4,5,6,7,8,9]

<view class='neir' wx:for="{{arr}}" wx:key="*this">
   <text>{{item}}</text>
</view>