1. はじめに今、ウォーターフォールフローについて書くことは、古い内容の焼き直しと見なされますか? 気にしない、私は書くつもりだし、誰も私を止めることはできない。 ウォーターフォール フローは非常に一般的なレイアウト方法とみなされ、全体的な考え方は理解しやすいですが、ミニ プログラムでは考慮する必要がある他のいくつかの問題が実際にあります。 質問1: uniapp は Vue ベースなので、DOM を直接操作するのは簡単ではありません。 質問2: UniappはVueをベースにしていますが、いくつかの変更が加えられているため、refを使用して操作するのは簡単ではありません。 まずアイデアについて話しましょう記事の長さを確保し、一部の友人がウォーターフォールフローの基本的な考え方にあまり精通していないため、最初にウォーターフォールフローの考え方について説明しましょう。下の図を見てみましょう。 商品画像の高さが不揃いで、商品タイトルの行数も不揃いなため、最終的にずらした配置になっていることがわかります。 以前、開発過程で CSS Flex レイアウトと列レイアウトを使用して実現しようとしたこともありましたが、かろうじて同じ効果を得ることができましたが、最終的にはバックエンドに接続するときに製品の人気度を優先する必要があったため、断念せざるを得ませんでした。 Flex 実装の欠点: Flex レイアウトを使用すると、製品を挿入する高さを正確に計算できません。 列実装の欠点: 列レイアウトを使用する場合、シーケンスを操作するのは簡単ではありません。
3. コアコードタイトルの通り、この記事のウォーターフォールフローの実装は uniapp が開発したミニプログラムに基づいています。ネイティブ JS 実装を期待する場合は、この記事の多くのアイデアを変更する必要があります。
// コンポーネント/ウォーターフォール.vue <テンプレート> <view class="ウォーターフォール"> <非表示を表示> // JS ネイティブ実装を使用する場合、for ループを直接使用して挿入し、列の高さを取得できます // ここでは、メソッドは画像をロードすることによって呼び出されます。デフォルトのパラメータは画像情報を運び、画像の高さを取得できます <block v-for(item in imgList" :key="item.id"> <画像:src="item.url" @load="loadImg" ></iamge> </ブロック> </ビュー> <view class="list" v-for="(list, key) ウォーターフォール内" :key="key"> <navigator url="https://www.baidu.com" v-for="list.list 内の項目" :key="item.id"> <画像:src="item.url" mode="widthFix"></画像> <view class="shop-info"> /*タイトルおよびその他の情報は省略*/ </ビュー> </ナビゲーター> </ビュー> </ビュー> </テンプレート> <スクリプト> エクスポートデフォルト{ // 別個のコンポーネントとして抽出されるため、データは親コンポーネントから取得されるか、現在のコンポーネントが API を要求します プロパティ: { imgList: 配列 }, データ(){ 戻る { lists: [], // 操作を簡単にするためにimgListをバックアップするために使用される配列waterfall: [ // 現在の列の高さを記録するために使用されます。プルアップして新しいデータを取得するために使用できるように、メソッドには保存されません。 // デフォルトの携帯電話の表示は 2 列に固定できるためです。 // コンピューター上でアダプティブまたはマルチカラムである場合は、複数の列を動的に挿入できます。 高さ: 0, リスト: [] },{ 高さ: 0, リスト: [] } ] } }, 作成された(){ this.lists = this.imgList; // Vue はデータを作成し、すぐにバックアップします}, 時計(){ // データ ソースをリッスンします。新しい値が渡された場合は、リスト配列でバックアップします。imgList(data){ data.length && this.lists.push(...data); } }, メソッド: { 読み込み画像(ev){ Root = this.waterfall; とします。 高さを e.detail.height とします。 //現在の高さに基づいて新しいデータが誰に渡されるかを判断し、列の高さを更新します。最初に左側を挿入します if (Root[0].height <= Root[1].height){ // ヒート優先度の問題を考慮して、shift() メソッドを使用してヘッダー データをプッシュします。 ルート[0].list.push(this.lists.shift()) ルート[0].height += 高さ; } それ以外 { ルート[1].list.push(this.lists.shift()) ルート[1].height += height; } } } } </スクリプト> この時点で、コアコードは完成です。
IV. 結論この記事を読んでこの方法を使うことに決めた人は、この書き方はパフォーマンスの問題に影響を及ぼす可能性があるということを覚えておいて、この側面を徹底的に研究するよう努力してほしいと思います。 これで、uniapp アプレットのウォーターフォール フロー レイアウトを実装するためのアイデアとコードに関するこの記事は終了です。uniapp アプレットのウォーターフォール フロー レイアウトに関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.19 のインストールと設定方法のグラフィック チュートリアル (win10)
>>: Centos6.5 で MySQL 5.7.19 をインストールして設定する方法
element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...
現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...
1. プロジェクトを右クリックしてプロパティを選択します2. プロジェクトファセットをクリック3. ...
SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...
1. CSS背景タグ1.背景色を設定するbackground-ground-color プロパティは...
1. フレームワークブラウザのドキュメント ウィンドウには 1 つの Web ページ ファイルしか表...
序文MySQL は、強力なクエリ機能、高いデータ一貫性、高いデータ セキュリティ、およびセカンダリ ...
この記事の例では、双方向データバインディングを実現するためのjsの具体的なコードを参考までに共有して...
序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...
1. まず、nginxの位置情報に関する関連知識を確認しましょう1) 位置マッチング手順: ~ #波...
テーブルの style="table-layout:fixed;" を設定し、次...
filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロン...
プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...