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

在js文件里面編輯

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

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

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

運(yùn)行結(jié)果：
索引: 0 -- 值:豬八戒
索引: 1 -- 值:天蓬元帥
索引: 2 -- 值:悟能

注意：大家總是喜歡講上面的冒號(hào)寫成了等于號(hào)然后運(yùn)行出錯(cuò)。

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

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

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

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

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

<!-- 列表渲染-->
<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ù)組就是一個(gè)普通數(shù)組。*this指代循環(huán)項(xiàng)
循環(huán)數(shù)組實(shí)例：[1,2,3,100],["1","20","sre"]

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

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

wx:for-item="對(duì)象名稱" 

wx:for-index="對(duì)象索引"
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:"高富帥"
    },

運(yùn)行結(jié)果：

謝謝大家的支持！可以點(diǎn)擊我的頭像，進(jìn)入我的空間瀏覽更多文章呢。建議大家360doc[www.qqstock.cn]注冊(cè)一個(gè)賬號(hào)登錄，里面真的有很多優(yōu)秀的文章，歡迎大家的到來(lái)。
---