Das WeChat-Applet implementiert ein Wasserfall-Flow-Layout und unbegrenztes Laden

Wasserfalllayout ist ein beliebtes SeitenlayoutDas typischste Eine davon ist Pinterest.com. Die Höhe jeder Karte ist unterschiedlich und bildet eine ungleichmäßige Schönheit

HTML5

, wir können viele darauf basierende Wasserfall-Layout-Plug-Ins finden 🎜>jQuery kann ein solches Layout problemlos erstellen. In WeChat-Miniprogrammen können wir diesen Effekt auch erzielen, aber aufgrund des Miniprogramm--Frameworks gibt es bei einigen Funktionen noch einige Unterschiede in den Implementierungsideen. Heute werfen wir einen Blick darauf, wie man dieses Wasserfall-Flusslayout in einem Miniprogramm umsetzt:

Miniprogramm-Wasserfall-Flusslayout

Was wir implementieren möchten, ist ein festes 2-Spalten-Layout und dann die

Bilddaten

dynamisch in diese beiden Spalten laden (während des Ladevorgangs). Das eingehende Bild wird in der linken oder rechten Spalte platziert Spalte entsprechend der tatsächlichen Größe des Bildes).

Wir wissen, dass wir in HTML normalerweise

new

/* 单个图片容器的样式 */
.img_item {
  width: 48%;
  margin: 1%;
  display: inline-block;
  vertical-align: top;
}

Image() verwenden, um ein zu erstellen image

-Objekt und verwenden Sie es dann, um dynamisch ein Bild zu laden, auf das die URL zeigt, und um die tatsächliche Größe des Bildes und andere Informationen zu erhalten. Es gibt kein entsprechendes JS-Objekt zur Bildverarbeitung Tatsächlich können wir die -Komponente in wxml verwenden, um eine solche Funktion auszuführen, obwohl sie etwas kompliziert ist Wir können die zu ladenden Bildinformationen über Datenbindung

an wxml übergeben und die -Komponente loslassen und sie dann verwenden, wenn das Bild geladen ist Die von bindload angegebene

<!-- 在页面上放一个隐藏区域，并用image组件去加载一个或多个图片资源 -->
<view style="display:none">
  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>
</view>

Ereignisverarbeitungsfunktion

Schauen wir uns die Definition in der Page-Datei an, die wir erhalten können Umfangreiche Informationen über die -Komponente aus dem eingehenden Ereignisobjekt e, einschließlich der tatsächlichen Größe des durch sie geladenen Bildes, und dann zeigen wir das Bild entsprechend den tatsächlichen Anforderungen auf der Seite an, um die Größe nach der Skalierung zu berechnen Gleiches Verhältnis. Dann können wir anhand der aktuellen akkumulierten Inhaltshöhe der linken und rechten Spalte entscheiden, auf welcher Seite der WXML-Code angezeigt wird In den Bildspalten können wir sehen, dass wir in der -Komponente die Ereignisüberwachungsfunktion mithilfe von bindscrolltolower eingerichtet haben. Beim Scrollen nach unten wird LoadImages ausgelöst, um den nächsten Satz von Bilddaten zu laden. So entsteht eine unendliche Ladung: Okay, es ist ein sehr einfaches Beispiel. Wenn Sie eine bessere Methode haben, teilen Sie sie gerne mit.

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert ein Wasserfall-Flow-Layout und unbegrenztes Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!