这篇文章主要是通过flex布局实现网格布局。
准备知识：
- 数组的undefined的问题
一般来说，网格布局是特殊的列表，后台返回的数据是一维数组。而我们通常使用wx:for的方式将数据填充进去。数据格式如下：
let dataList = ['a','b','c','d']dataList.forEach(item => {console.log('item',item)} )输出结果如下：
item a
item b
item c
item d
在微信小程序中数组赋值和取值有两种情况，一种是该位置没有赋值，一种是取值的索引超出了数组长度，这两种情况具体表现如下：
- 数组赋值时候没有赋值的情况：
let dataList = ['a','b',,'c','d',undefined]
dataList[7] = 'f'
console.log('dataList-length',dataList.length)for(let i = 0; i < dataList.length; i++){console.log('item-for',`index:${i} value:${dataList[i]}`)
}dataList.forEach(item => {console.log('item-forEach',item)} )输出结果如下：
dataList-length 8
item-for index:0 value:a
item-for index:1 value:b
item-for index:2 value:undefined
item-for index:3 value:c
item-for index:4 value:d
item-for index:5 value:undefined
item-for index:6 value:undefined
item-for index:7 value:f
item-forEach a
item-forEach b
item-forEach c
item-forEach d
item-forEach undefined
item-forEach f
可以看到没有赋值的地方默认为undefined (注意该undefined与数组中赋值的undefined意义不同)，而forEach直接略过了没有赋值的位置。
- 数组取值的范围超过的数组的长度：
let dataList = ['a','b']
console.log('dataList-length',dataList.length)
console.log('获取第length+1为数组内容',dataList[dataList.length+1])输出结果如下：
dataList-length 2
获取第length+1为数组内容 undefined
- 微信小程序中列表渲染遇到数组内容为undefined的情况
代码如下：
index.js:
dataList: ['a',,'b','c']index.wxml:
<view wx:for='{{dataList}}'><view wx:if='{{index === 2}}'>{{dataList[dataList.length+1]}}</view><view wx:else>{{item}}</view></view>
由此可以知道，有两种情况：
- 当数组初始化后，没有赋值的位置，在列表渲染的时候得到的结果为null
- 当数组初始化完成后，在列表渲染的时候，所取的索引位置超过了数组长度，本次view渲染将不再渲染
网格布局的实现
现在将利用上面的结论和flex布局渲染一个每行显示两个元素的网格页面
index.js:dataList: ['a','b','c','d','e','f']index.wxml:
<view class='grid' wx:for='{{dataList}}' wx:if='{{index%2 === 0}}'><view wx:for='{{[dataList[index], dataList[index+1]]}}' wx:for-item='dataItem'>{{dataItem}}</view></view>index.wxss:.grid{display: flex;justify-content: space-around;
}
end…
