微信小程序中通过flex实现网格布局(一)

这篇文章主要是通过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

在微信小程序中数组赋值和取值有两种情况，一种是该位置没有赋值，一种是取值的索引超出了数组长度，这两种情况具体表现如下：

1. 数组赋值时候没有赋值的情况：

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直接略过了没有赋值的位置。

2. 数组取值的范围超过的数组的长度：

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>

由此可以知道，有两种情况：

1. 当数组初始化后，没有赋值的位置，在列表渲染的时候得到的结果为null
2. 当数组初始化完成后，在列表渲染的时候，所取的索引位置超过了数组长度，本次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…