要实现的样式：
图片.png
home.wxml
<view class="menu_container">
<view class="menu_item" wx:for="{{menus}}" wx:for-index="idx" wx:for-item="menu">
<image class="menu_icon" src="{{menu.url}}" />
<text class="menu_name">{{menu.name}}</text>
</view>
</view>
我这里才用的是用for循环去渲染组件，所以在这里需要详细的去讲述一下小程序的for循环：
在组件上使用 wx:for 控制属性绑定一个数组，就可以是数组中的各项数据重复去渲染该组件。可以使用wx:for-item指定数组当前元素的变量名，可以使用wx:for-index指定数组当前下标的变量名。
上一节我们还用到了block wx:for，它是渲染一个包含了多节点的结构块。
home.js
menus:[
{
"name":"购物车",
"url":'../../images/menu/ic_nav_home_cart.png'
},
{
"name":"分类",
"url":'../../images/menu/ic_nav_home_category.png'
},
{
"name":"足迹",
"url":'../../images/menu/ic_nav_home_footprint.png'
},
{
"name":"我的",
"url":'../../images/menu/ic_nav_home_mine.png'
},
{
"name":"修改",
"url":'../../images/menu/ic_nav_home_notify.png'
},
{
"name":"预定",
"url":'../../images/menu/ic_nav_home_order.png'
},
{
"name":"资产",
"url":'../../images/menu/ic_nav_home_property.png'
},
{
"name":"商铺",
"url":'../../images/menu/ic_nav_home_store.png'
},
],
这部分代码是在data中。
此处的menus对应的正是wx:for="{{menus}}”中的menus。
home.wxss
.menu_container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.menu_item {
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
box-sizing: border-box;
padding-bottom: 10px;
padding-top: 10px;
}
.menu_icon {
width: 40px;
height: 40px;
padding-bottom: 5px;
}
在样式中可以看出，小程序也是可以使用 flex布局。
