滝の流れのレイアウト効果を実現し、左から右の順に表示したい場合、CSS レイアウト方法では当面のニーズを満たすことができません。小紅酒の滝の流れの効果を参照してください。小紅酒は左右の列に分かれており、奇数と偶数に応じて表示できます。
<view class=waterfall> <view class=waterfall-left> <view wx:if={{index%2 == 0}} class=item></view> </view> <view class=waterfall-right> <view wx:if={{index%2 == 1}} class=item></view> </view></view>しかし、ここで問題が発生します。各要素の高さは不確実であるため、左右の列の高さに大きな差が生じる可能性が高くなります。
解決：この問題を解決するには、各要素の高さが異なる理由を見つける必要があります。一般的には、画像の高さであるか、条件によっては表示される領域の高さだけが異なる場合があります。画像の高さは異なりますが、他の部分の高さは変わらないため、計算が簡単になります。
一般的な考え方は、左列と右列の高さを取得することです。左列と右列の高さを計算するには、コード次数の差を入力し、2 つの列の間の差のthresholdの 1/2 を移動します。図:
上記は理想的な状態ですが、最も高さの高い列の最小要素であるminH上側に移動に適した要素があるかどうかを知る必要があります。が差のthresholdより小さい場合、それを移動できます。差の高さの半分に最も近い長辺の要素minH取得できます (通常、高さが最も小さい要素を移動することもできます)。最小の高さを賢く設定します）。高さが最も小さい要素がその差より大きい場合は、移動する必要はありません。
では、どのように移動するかというと、デフォルトでは要素にposition属性が与えられ、その値はcenterです。要素を左に移動する場合は、要素にposition:left;の属性を与えます。位置属性を指定し、奇数と偶数に従って次のようにします。
<view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} クラス=item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center) ')}}クラス=アイテム></ビュー> </ビュー></ビュー>この時点で、高低差が大きいという問題は解決できます。
2 つの列の高さはどのように計算すればよいでしょうか?重要な点は、2 つの列の高さを知るために画像の幅と高さを取得することです。ここには 2 つの状況があります。
1. インターフェイスは画像の幅と高さを返します。
インターフェイスは画像の幅と高さを返すため、画像の高さを直接累積すると、2 つの列の高さを比較して高さの差を取得できます。
高い側のminH 2 つの列の高さthreshold差より小さい場合、つまりminH < threshold場合、 minH移動する必要があります。
このようにして、データを取得しながら、要素を移動する必要があるかどうかを知ることができます。データの処理後、データはすぐにビュー レイヤにレンダリングされます。
もちろん、この方法が最も心配がありませんが、インターフェイスが画像の幅と高さを返さない可能性があるため、2 番目の方法を使用する必要があります。
2. インターフェイスは画像の幅と高さを返しません。画像の幅と高さは画像ロード イベントで取得されます。
画像の読み込みイベントをリッスンし、画像の幅と高さを取得します。最後の画像が読み込まれた後、boundingClientRect を使用して 2 つの列の高さを測定し、高さの差を取得します。
この方法では、画像をロードした後に要素を移動する必要があるかどうかを測定する必要があります。要素の動きがより明確になります。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。