要實現(xiàn)的樣式：

圖片.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循環(huán)去渲染組件，所以在這里需要詳細的去講述一下小程序的for循環(huán)：
在組件上使用 wx:for 控制屬性綁定一個數(shù)組，就可以是數(shù)組中的各項數(shù)據(jù)重復去渲染該組件?？梢允褂脀x:for-item指定數(shù)組當前元素的變量名，可以使用wx:for-index指定數(shù)組當前下標的變量名。
上一節(jié)我們還用到了block wx:for，它是渲染一個包含了多節(jié)點的結構塊。
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":"資產(chǎn)",
        "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布局。