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

この記事では、WeChatアプレットの9マスグリッド効果を実現するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. Jiugongge 実装の例図:

ヒント:説明:

レイアウトの互換性を保つには、 display: -webkit-flex;を使用します。

各行の 3 つのアイコンの 2 つのペアjustify-content: space-between; 。

親要素はflex-wrap: wrap;プロパティを wrap に設定する必要があります。そうでない場合は 1 行に表示されます。

width: 33.33333333%;占有サイズに応じて割り当てられます。

要素を中央に配置するにはjustify-content:center;プロパティを使用します。

flex-direction: column;およびflex-wrap: wrap;プロパティを使用して、 iconとtext要素を垂直に配置するように設定します。

2. .js ファイルでデータソースを定義します。

ページ（{

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

3. .wxss ファイルでスタイルを次のように定義します。

 /*
  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;
}

4. .wxml ファイルでの具体的な使用法:

<ビュークラス='グリッドアイテムコンテナ'>
  <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>
      </ビュー>
    </ビュー>
  </ブロック>
</ビュー>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: