WeChatアプレットが9マスグリッド効果を実現

ページ（{

  /**
   * ページデータソース */
  データ： {
    アイコンカラー: [
      「赤」、「オレンジ」、「黄」、「緑」、「rgb(0,255,255)」、「青」、「紫」
    ]、
    アイコンスタイル: [
      {
        "タイプ":"成功",
        "サイズ":30,
        "色":"#32CD32"
      },
      {
        "タイプ": "success_no_circle",
        「サイズ」: 30,
        「色」：「オレンジ」
      },
      {
        "タイプ": "情報",
        「サイズ」: 30,
        「色」：「黄色」
      },
      {
        "タイプ": "警告",
        「サイズ」: 30,
        「色」：「緑」
      },
      {
        "タイプ": "待機中",
        「サイズ」: 30,
        "色": "rgb(0,255,255)"
      },
      {
        "タイプ": "キャンセル",
        「サイズ」: 30,
        「色」：「青」
      },
      {
        「タイプ」：「ダウンロード」、
        「サイズ」: 30,
        「色」：「紫」
      },
      {
        "タイプ": "検索",
        「サイズ」: 30,
        "色": "#C4C4C4"
      },
      {
        "タイプ": "クリア",
        「サイズ」: 30,
        「色」：「赤」
      }
    ]
  }
})

 /*
  9グリッドコンテナレイアウトスタイル*/
.グリッドアイテムコンテナ {
  ディスプレイ: -webkit-flex;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  flex-wrap: ラップ;
  上境界線: 1rpx 実線 #D9D9D9;
}

/*
  アイテムコンテナスタイル*/
.grid-item-child {
  ディスプレイ:フレックス;
  ディスプレイ: -webkit-flex;
  コンテンツを中央揃えにする。
  flex-direction: 列;
  flex-wrap: ラップ;
  フロート: 左;
  幅: 33.33333333%;
  高さ: 200rpx;
  ボックスのサイズ: 境界線ボックス;
  背景色: #FFFFFF;
  右境界線: 1rpx 実線 #D9D9D9;
  下部境界線: 1rpx 実線 #D9D9D9;
}

/*
  アイコンスタイル*/
.grid-item-icon {
  ディスプレイ:フレックス;
  ディスプレイ: -webkit-flex;
  コンテンツを中央揃えにする。
}

/*
 テキストスタイル*/
.grid-item-label {
  ディスプレイ:フレックス;
  ディスプレイ: -webkit-flex;
  コンテンツを中央揃えにする。
  色: #666;
  フォントサイズ: 14px;
}

<ビュークラス='グリッドアイテムコンテナ'>
  <block wx:for="{{iconStyle}}" wx:key="index">
    <ビュークラス='グリッドアイテム-子'>
      <表示>
        <icon class='grid-item-icon' type='{{item.type}}' size='{{item.size}}' color='{{item.color}}'/>
        <text class='grid-item-label'>{{item.type}}</text>
      </ビュー>
    </ビュー>
  </ブロック>
</ビュー>