Das WeChat-Applet realisiert den Neun-Quadrat-Rastereffekt

Seite({

  /**
   * Datenquelle der Seite */
  Daten: {
    Symbolfarbe: [
      „rot“, „orange“, „gelb“, „grün“, „rgb(0,255,255)“, „blau“, „lila“
    ],
    Symbolstil: [
      {
        "Typ": "Erfolg",
        "Größe": 30,
        "Farbe":"#32CD32"
      },
      {
        "Typ": "Erfolg_kein_Kreis",
        "Größe": 30,
        "Farbe": "orange"
      },
      {
        "Typ": "Info",
        "Größe": 30,
        "Farbe": "gelb"
      },
      {
        "Typ": "warnen",
        "Größe": 30,
        "Farbe": "grün"
      },
      {
        "Typ": "Warten",
        "Größe": 30,
        "Farbe": "rgb(0,255,255)"
      },
      {
        "Typ": "Abbrechen",
        "Größe": 30,
        "Farbe": "blau"
      },
      {
        "Typ": "Download",
        "Größe": 30,
        "Farbe": "lila"
      },
      {
        "Typ": "Suche",
        "Größe": 30,
        "Farbe": "#C4C4C4"
      },
      {
        "Typ": "klar",
        "Größe": 30,
        "Farbe": "rot"
      }
    ]
  }
})

 /*
  Neun-Raster-Container-Layoutstil*/
.grid-item-container {
  Anzeige: -webkit-flex;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand dazwischen;
  Flex-Wrap: Umwickeln;
  Rahmen oben: 1rpx durchgezogen #D9D9D9;
}

/*
  Artikelcontainer-Stil*/
.raster-element-untergeordnetes {
  Anzeige: Flex;
  Anzeige: -webkit-flex;
  Inhalt ausrichten: zentriert;
  Flex-Richtung: Spalte;
  Flex-Wrap: Umwickeln;
  schweben: links;
  Breite: 33,33333333 %;
  Höhe: 200rpx;
  Box-Größe: Rahmenbox;
  Hintergrundfarbe: #FFFFFF;
  Rand rechts: 1rpx durchgezogen #D9D9D9;
  Rahmen unten: 1rpx durchgezogen #D9D9D9;
}

/*
  Symbolstil*/
.Rasterelement-Symbol {
  Anzeige: Flex;
  Anzeige: -webkit-flex;
  Inhalt ausrichten: zentriert;
}

/*
 Textstil*/
.raster-element-label {
  Anzeige: Flex;
  Anzeige: -webkit-flex;
  Inhalt ausrichten: zentriert;
  Farbe: #666;
  Schriftgröße: 14px;
}

<Ansichtsklasse='Rasterelement-Container'>
  <block wx:für="{{iconStyle}}" wx:key="index">
    <Ansichtsklasse='Rasterelement-Kind'>
      <Ansicht>
        <icon Klasse='grid-item-icon' Typ='{{item.type}}' Größe='{{item.size}}' Farbe='{{item.color}}'/>
        <text class='grid-item-label'>{{item.type}}</text>
      </Ansicht>
    </Ansicht>
  </block>
</Ansicht>