双层wx:for 实现方案
解释:
wx:for : 这个不需要过多说明了吧,{{}} 内的内容当做js表达式,传入数组就换遍历它。
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是数组中的一个数)。
wx:for-index : 上面也简单说到了这个属性,这个例子第一层循环也可以使用这一属性来实现,读者有兴趣可以自己尝试。
wx:key : 在这个例子中并不能体现出它的重要性,举一个其他的例子: 假如有一个需求,在使用wx:for 建立列表的同时,每一个item中都配有一个input输入框,我还有一个按钮,这个按钮点击后,列表再加入一个item(也有input输入框),并且每次都在列表前面加入(在原数组上使用unshift插入),不难想象,这时列表原先顺序会被打破,如果恰好某一个input框中有内容,那么这个input框并不跟随item位移(如下图)。
<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>