微信小程序（三）菜单栏

要实现的样式：

图片.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布局。