表白：突然想到你，笑了笑自己。
講解對象：小程序 列表渲染
作者：融水公子 rsgz
微信小程序教程

在js文件里面編輯

  data: {
    list:[
      {
        id:0,
        name:"豬八戒"
      },
      {
        id:1,
        name:"天蓬元帥"
      },
      {
        id:2,
        name:"悟能"
      }
    ]
  },

在WXML文件里面編輯 列表渲染
wx:for={{數(shù)組或者對象}}
wx:for-item="循環(huán)項名稱"
wx:for-index="循環(huán)項索引"

<!-- 列表渲染-->
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
  索引：{{index}}
  ---
  值:{{item.name}}
</view>

運行結果：
索引: 0 -- 值:豬八戒
索引: 1 -- 值:天蓬元帥
索引: 2 -- 值:悟能

注意：大家總是喜歡講上面的冒號寫成了等于號然后運行出錯。

默認情況下。只有一層循環(huán)，我們可以不寫

wx:for-item="循環(huán)項名稱"  wx:for-index="循環(huán)項索引"

小程序也會把循環(huán)項的名稱和索引的名稱就叫做item和index。

<!-- 列表渲染-->
<view wx:for="{{list}}">
  索引：{{index}}
  ---
  值:{{item.name}}
</view>

wx:key="唯一的值"
作用：提高列表的渲染效率
特點：wx:key如果綁定的是字符串，那么這個字符串肯定是循環(huán)數(shù)組中對象想的唯一屬性

<!-- 列表渲染-->
<view 
wx:for="{{list}}" 
wx:for-item="item" 
wx:for-index="index"
wx:key="id"
>
  索引：{{index}}
  ---
  值:{{item.name}}
</view>

wx:key="*this"
作用：就表示循環(huán)數(shù)組就是一個普通數(shù)組。*this指代循環(huán)項
循環(huán)數(shù)組實例：[1,2,3,100],["1","20","sre"]

數(shù)組嵌套循環(huán)
wx:for-item="循環(huán)項名稱"  wx:for-index="循環(huán)項索引" 這兩個綁定的名稱不能重名

對象循環(huán)
wx:for={{對象}}

wx:for-item="對象名稱" 

wx:for-index="對象索引"
wxml文件

<view>
  <view 
  wx:for="{{person}}"
  wx:for-item="value" 
  wx:for-index="key"
  wx:key="name"
  >
  屬性：{{key}}
  ---
  值：{{value}}
</view>
</view>

JS文件

    person:{
      age:20,
      height:180,
      weight:120,
      name:"高富帥"
    },

運行結果：

謝謝大家的支持！可以點擊我的頭像，進入我的空間瀏覽更多文章呢。建議大家360doc[www.hbhlny.cn]注冊一個賬號登錄，里面真的有很多優(yōu)秀的文章，歡迎大家的到來。
---