【微信开发】微信小程序多层wx:for嵌套的使用

1. 首先介绍一下需求：

1. 我们有一个对象数组list，数组成员的结构是:

{
	_id: '',  //主键
	name: '', //名称 - string
	type: 1,  //类型 - number  （范围 1 - 12）
}

2. 我们要做的是将该数组内的成员按照其 type 属性分类列出

2. 双层wx:for 实现方案

<view wx:for="{{[1,2,3,4,5,6,7,8,9,10,11,12]}}"  wx:for-item="i"  wx:key="key">
	<view wx:for="{{list}}" wx:if="{{item.type == i}}" wx:key="_id" >
		<!--内容-->
	</view>
</view> 

解释:

1. wx:for : 这个不需要过多说明了吧，{{}} 内的内容当做js表达式，传入数组就换遍历它。
2. wx:for-item : 这个比较重要，他有默认值（默认名） item ，这个item 指的就是遍历出来的单个成员，比如第一层wx:for，我自己指定了这个item名字叫 i ，也就是说后面我们用到 i 就是 第一层的成员，那为什么不叫index呢？叫i不会很low吗？是因为还有一个属性叫 wx:for-index 指定的是当前遍历到的成员索引，它的默认值（默认名）是index，也就是说会重名，在这个例子中体现的不明显，以后实际应用中会出问题。 所以在第二层wx:for 中，直接使用wx:if 判断一下 item.type == i 就可以实现分类了(这里的item是第二层wx:for的成员默认名，所以item.type就是其中一个成员的属性type的值，i是第一层wx:for的成员名,i是数组中的一个数)。
3. wx:for-index : 上面也简单说到了这个属性，这个例子第一层循环也可以使用这一属性来实现，读者有兴趣可以自己尝试。
4. wx:key : 在这个例子中并不能体现出它的重要性，举一个其他的例子: 假如有一个需求，在使用wx:for 建立列表的同时，每一个item中都配有一个input输入框，我还有一个按钮，这个按钮点击后，列表再加入一个item（也有input输入框），并且每次都在列表前面加入（在原数组上使用unshift插入），不难想象，这时列表原先顺序会被打破，如果恰好某一个input框中有内容，那么这个input框并不跟随item位移(如下图)。
   
   学过vue等框架的原理的小伙伴应该很明白这个原因，这里只简要说明它的用途不长篇大论了。如果使用了wx:key，并且指定一个 wx:key=“_id”（这里不需要加{{}}），这时每个item便有了“主键”，框架在解析的时候也就有依据。