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

, 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

Bilddaten

Wir wissen, dass wir in HTML normalerweise

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

-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

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

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!