Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet

1. Einleitung

Gilt es als Aufwärmen alter Themen, wenn man jetzt etwas über den Wasserfallfluss schreibt?

Es ist mir egal, ich werde schreiben und niemand kann mich aufhalten.

Der Wasserfallfluss sollte als eine sehr gängige Layoutmethode betrachtet werden und die allgemeine Idee ist leicht zu verstehen, aber es gibt tatsächlich mehrere andere Probleme, die im Miniprogramm berücksichtigt werden müssen.

Frage 1: Uniapp basiert auf Vue, daher ist es nicht einfach, DOM direkt zu bedienen.

Frage 2: Uniapp basiert auf Vue, es wurden jedoch einige Änderungen vorgenommen, sodass die Bedienung mit ref nicht einfach ist

Zweitens, lasst uns zuerst über die Idee sprechen

Um die Länge des Artikels zu gewährleisten und da einige Freunde mit der Grundidee des Wasserfallflusses nicht sehr vertraut sind, wollen wir zunächst über die Idee des Wasserfallflusses sprechen. Schauen wir uns das Bild unten an.

Es ist ersichtlich, dass die Höhen der Produktbilder inkonsistent sind und die Zeilenanzahl in den Produkttiteln inkonsistent ist, sodass der endgültige Effekt eine versetzte Anordnung ist.

Zuvor habe ich im Entwicklungsprozess auch versucht, dies mit CSS Flex-Layout und Spaltenlayout zu erreichen, und ich konnte kaum den gleichen Effekt erzielen. Am Ende musste ich jedoch bei der Verbindung mit dem Backend der Popularität des Produkts Vorrang einräumen und musste daher aufgeben.

Nachteile der Flex-Implementierung: Bei Verwendung des Flex-Layouts kann die Höhe zum Einfügen von Produkten nicht genau berechnet werden.

Nachteile der Spaltenimplementierung: Bei Verwendung des Spaltenlayouts ist es nicht einfach, die Sequenz zu bedienen.

PS: Wenn keine Produktsortierung erforderlich ist, können Sie eine reine CSS-Implementierung in Betracht ziehen. Ich werde hier nicht ins Detail gehen, es gibt viele in Nuggets.

3. Kerncode

Wie der Titel schon sagt, basiert die Implementierung des Wasserfallflusses in diesem Artikel auf dem von uniapp entwickelten Miniprogramm. Wenn Sie eine native JS-Implementierung erwarten, müssen viele Ideen in diesem Artikel geändert werden.
Lassen Sie mich zunächst einige Fragen beantworten:

Da die Spaltenhöhe nicht über $refs abgerufen werden kann, lädt der Code das Bild zunächst einmal über die @load-Zeit des Image-Tags und übergibt die Breite, Höhe und andere Informationen des Bildes an die Methode.

// Komponente/Wasserfall.vue
<Vorlage>
    <Ansichtsklasse="Wasserfall">
        <Ausgeblendete anzeigen>
            // Bei Verwendung einer nativen JS-Implementierung können Sie die for-Schleife direkt zum Einfügen verwenden und dann die Spaltenhöhe abrufen // Hier wird die Methode durch Laden des Bildes aufgerufen. Der Standardparameter enthält die Bildinformationen und die Bildhöhe kann abgerufen werden <block v-for(item in imgList" :key="item.id">
                <image :src="item.url" @load="loadImg" ></iamge>
            </block>
        </Ansicht>
        <view class="list" v-for="(list, key) in waterfall" :key="key">
            <navigator url="https://www.baidu.com" v-for="Artikel in Liste.list" :key="Artikel.id">
                <Bild: src="item.url" mode="widthFix"></Bild>
                <Klasse anzeigen="shop-info">
                    /*Titel und andere Informationen weggelassen*/
                </Ansicht>
            </navigator>
        </Ansicht>
    </Ansicht>
</Vorlage>

<Skript>
    Standard exportieren {
        // Als separate Komponente extrahiert, sodass die Daten von der übergeordneten Komponente stammen oder die aktuelle Komponente die API anfordert
        Requisiten: { imgList: Array },
        Daten(){
            zurückkehren {
                lists: [], // Array wird zum Sichern von imgList für eine einfache Bedienung verwendet waterfall: [
                    // Wird verwendet, um die Höhe der aktuellen Spalte aufzuzeichnen. Sie wird in der Methode nicht gespeichert, sodass sie zum Hochziehen und Abrufen neuer Daten verwendet werden kann. // Weil die Standardanzeige von Mobiltelefonen auf zwei Spalten festgelegt werden kann. // Wenn es auf dem Computer adaptiv oder mehrspaltig ist, können Sie dynamisch mehrere Spalten einfügen.
                        Höhe: 0, 
                        Liste: []
                    },{
                        Höhe: 0, 
                        Liste: []
                    }
                ]
            }
        },
        erstellt(){
            this.lists = this.imgList; // Vue erstellt Daten und sichert sie sofort},
        betrachten(){
            // Hören Sie auf die Datenquelle. Wenn ein neuer Wert übergeben wird, sichern Sie ihn mit dem Listen-Array. imgList(data){ data.length && this.lists.push(...data); }
        },
        Methoden: {
            ladenImg(ev){
                lass Root = diesen.Wasserfall;
                sei Höhe = e.detail.höhe;
                //Anhand der aktuellen Höhe bestimmen, wem die neuen Daten gegeben werden und Spaltenhöhe aktualisieren; linke Seite zuerst einfügen, wenn (Root[0].height <= Root[1].height){
                    // Unter Berücksichtigung der Wärmepriorität wird die Methode shift() verwendet, um die Header-Daten herauszuschieben.
                    Root[0].list.push(diese.lists.shift())
                    Root[0].height += Höhe;
                } anders {
                    Root[1].list.push(diese.lists.shift())
                    Root[1].height += Höhe;
                }
            }
        }
    }
</Skript>

An diesem Punkt ist der Kerncode vollständig.

PS: Da die Methode durch das @load-Ereignis des Bildes ausgelöst wird, wirkt sich das Laden in großem Maßstab zwangsläufig auf die Leistung aus, sodass Sie selbst einige Kompromisse eingehen müssen.

IV. Fazit

Ich hoffe, dass jeder, der diesen Artikel liest und sich für diese Methode entscheidet, eines im Hinterkopf behält: Diese Schreibmethode kann sich auf Leistungsprobleme auswirken, und man kann sich intensiv mit diesem Aspekt befassen.

Damit ist dieser Artikel über die Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts des Uniapp-Applets abgeschlossen. Weitere relevante Inhalte zum Wasserfall-Flow-Layout des Uniapp-Applets finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!