小程序-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>