Miniprogramm Wasserfallfluss MP-Wasserfall

MP-Wasserfall

Eine kleine Programm-Wasserfall-Flow-Komponente

Szenen, die verwendet werden sollen

Im Wasserfallfluss-Unterelement gibt es ein Bild mit variabler Breite und Höhe sowie einige andere Elemente. Wenn die Back-End-Schüler die Breite und Höhe des Bildes nicht zurückgeben, können Sie versuchen, diese Komponente zu verwenden^_^ Das Die Komponente ermittelt automatisch die Höhe des Elements und fügt ein kürzeres Element in die Spalte ein

Der Effekt ist wie im Bild gezeigt: Miniprogramm: MJ Magic AI Drawing Beautiful Wallpaper

wie benutzt man

1. Laden Sie das Projekt herunter und kopieren Sie den Wasserfall-Komponentenordner  dist/mp-waterfall in Ihr eigenes Projekt
2. Erstellen Sie selbst eine neue Wasserfall-Flow-Knotenkomponente (Referenz ) und fügen Sie sie demo/components/waterfall-itemder Knotenkomponente hinzu (da die Wasserfall-Flow-Komponente jedes Element in der Liste als itemData an die Unterkomponente übergibt), zum Beispiel:propertiesitemData

<view class="w-item">
  <!-- Die Komponente fügt die Höhe des Bildes in itemData ein und das Feld ist imgHeight. Stellen Sie daher die Bildhöhe bitte auf {
  
  {itemData.imgHeight}}px -->
  <Bild
    src="{
  
  {itemData.imgUrl}}"
    style="width:100%;height:{
  
  {itemData.imgHeight}}px"
    class="w-image"
  />
</view>

Komponente({
  /**
   * Liste der Komponenteneigenschaften
   */
  Eigenschaften: {
    Artikeldaten: {
      Typ: Objekt,
    },
  },
});

1. mp-waterfallFühren Sie Komponenten und Komponenten in die JSON-Seite ein waterfall-item. Weitere Informationen finden Sie unterdemo/pages/index/index.json

{
  „usingComponents“: {
    "mp-waterfall": "../../components/mp-waterfall",
    „waterfall-item“: „../../components/waterfall-item“
  }
}

1. Fügen Sie der Seite wxml die Wasserfall-Flow-Komponente hinzu. Eine Parameterbeschreibung finden Sie unter  Parameter

<!-- generic:item Da diese Komponente die abstrakte Knotenfunktion des WeChat-Applets verwendet, müssen Sie die Unterkomponente manuell angeben und die selbst erstellte Wasserfall-Flow-Knotenkomponente übergeben -->
<mp-wasserfall
  id="Wasserfall"
  generic:item="waterfall-item"
  list="{
  
  {Liste || []}}"
  idKey="id"
  imageKey="imgUrl"
></mp-waterfall>

1. Fügen Sie Daten hinzu, listum den Inhalt des Wasserfallflusses anzuzeigen. Einfaches Beispiel:

/**
 * „id“ und „imgUrl“ in den Beispieldaten sind nicht obligatorisch. Benutzerdefinierte Felder können entsprechend der tatsächlichen Situation verwendet werden. Sie müssen nur mit dem an die Komponente übergebenen „idKey“ und „imageKey“ konsistent sein.
 * Beispiel: Der eindeutige Identifikationsschlüssel in den Daten ist „content_id“, der Schlüssel des Bildes ist „img“ und die übergebenen Requisiten sind <mp-waterfall idKey="content_id" imageKey="img" Andere Parameter. . >< /mp-waterfall>
 */
Seite({
  Daten: {
    // Daten auflisten
    Liste: [
      {
        ID: 1,
        imgUrl: 'https://iph.href.lu/300x200?fg=ffffff&bg=07c160'
      },
      {
        ID: 2,
        imgUrl: 'https://iph.href.lu/300x300?fg=ffffff&bg=07c160'
      },
      {
        ID: 3,
        imgUrl: 'https://iph.href.lu/300x400?fg=ffffff&bg=07c160'
      },
      {
        ID: 4,
        imgUrl: 'https://iph.href.lu/300x500?fg=ffffff&bg=07c160'
      },
      {
        ID: 5,
        imgUrl: 'https://iph.href.lu/300x600?fg=ffffff&bg=07c160'
      },
    ],
  },
})

1. Schiebeladen, einfach Daten direkt an die Liste anhängen