WeChat アプレットはウォーターフォール フロー レイアウトと無制限の読み込みを実装します

ウォーターフォール フロー レイアウトは人気のあるページ レイアウトの方法であり、最も典型的なものは Pinterest.com であり、すべての高さ

HTML5 では、このようなレイアウトを簡単に作成するための jQuery に基づく多くのウォーターフォール レイアウト プラグインがあり、WeChat ミニ プログラムでもこの効果を実現できます。 , しかし、ミニ プログラム フレームワーク のいくつかの機能により、実装のアイデアにはまだいくつかの違いがあります

今日は、この種のウォーターフォール フロー レイアウトを実装する方法を見ていきます。

小さなプログラムのウォーターフォールフローレイアウト

私たちが実装したいのは、固定の2列レイアウトであり、その後、写真データをこれらの2つの列に動的にロードします（そして、ロードされた画像は配置されます）画像の実際のサイズに応じて左の列または右の列)

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

HTML では、画像を動的にロードしたい場合、通常、画像 オブジェクトを作成するために new Image() を使用することがわかっています。 を使用して、URL が指す画像を動的にロードし、画像の実際のサイズやその他の情報を取得します。実際には、この関数は画像のロードを処理するための対応する JS オブジェクトを提供しません。これは、wxml の コンポーネントを使用して実現できます。少し複雑ですが、Put の

データ バインディング

を介して渡すことができます。 wxml にロードする画像情報を指定し、 コンポーネントに画像リソースをロードさせ、画像がロードされると、bindload で指定された イベント処理 関数 を使用してさらに処理 します。 Page ファイルで定義されているので、受信イベント オブジェクト e から、読み込まれた画像の実際のサイズを含む、 コンポーネントに関する豊富な情報を取得できます。その後、ページに従って画像を読み込みます。表示する必要がある実際のサイズに基づいて、同じ比率でスケーリングした後のサイズを計算できます。次に、現在ロードされている画像を左右の列の現在の累積コンテンツの高さに基づいてどちら側に配置するかを決定できます。

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

これは、画像の 2 つの列の wxml コードの場合、スクロールするときに、bindscrolltower を使用してイベント リスニング関数を設定していることがわかります。最後に、loadImages がトリガーされて次の画像データのセットが読み込まれ、無限ロードが形成されます。

以上がWeChat アプレットはウォーターフォール フロー レイアウトと無制限の読み込みを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。