微信小程序 — 九宫格

效果图如下：

网络上有几种作法，在此我采用了〝学而时习之〞所提供的做法。其作法很简单，就是将所有格子内容用 wx:for 逐一呈现，然后利用 css 控制格子大小，且宽度不足时会自动换行的特性，达到九宫格的显示效果。

在 menu.wxml 中布置如下代码：

  <view class="grids">
    <view class="grids-cell" wx:for="{{itemList}" wx:key="name">
      <navigator url="{{item.url}}">
        <view class="grids-cell-icon">
          <image src="{{item.pic}}" mode="scaleToFill" />
        </view>
        <text class="grids-cell-label">{{item.name}}</text>
      </navigator>
    </view>
  </view>

在 menu.js 中设置资料：

  data: {
    itemList:[
      {
        name: "语文",
        url: "../C1/index",
        pic:"../../images/icon/01.png"
      },
      {
        name: "数学",
        url: "../C2/index",
        pic: "../../images/icon/02.png"
      },
      {
        name: "英语",
        url: "../C3/index",
        pic: "../../images/icon/03.png"
      },
      {
        name: "历史",
        url: "../C4/index",
        pic: "../../images/icon/04.png"
      }      
    ]
  },

在menu.wxss设置样式：

.grids {
  position: relative;
  overflow: hidden;
  padding:10px;
  text-align:center;
}

.grids-cell {
  position: relative;
  float: left;
  width: 30%;
  margin:5px;
 }

.grids-cell-icon {
  display: block;
  width: 100%;
  height: 100%;
  text-align:center;
  margin-top: 5px;
}

.grids-cell-icon image {
  width: 80px;
  height: 80px;
}

.grids-cell-label {
  display: block;
  font-size:14px;
  text-align:center;
}

参考资料：

小程序开发系列(四)九宫格另一种实现
https://blog.csdn.net/xxdddail/article/details/70314211