uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード

uniapp アプレットでウォーターフォール フロー レイアウトを実装するためのアイデアとコード

1. はじめに

今、ウォーターフォールフローについて書くことは、古い内容の焼き直しと見なされますか?

気にしない、私は書くつもりだし、誰も私を止めることはできない。

ウォーターフォール フローは非常に一般的なレイアウト方法とみなされ、全体的な考え方は理解しやすいですが、ミニ プログラムでは考慮する必要がある他のいくつかの問題が実際にあります。

質問1: uniapp は Vue ベースなので、DOM を直接操作するのは簡単ではありません。

質問2: UniappはVueをベースにしていますが、いくつかの変更が加えられているため、refを使用して操作するのは簡単ではありません。

まずアイデアについて話しましょう

記事の長さを確保し、一部の友人がウォーターフォールフローの基本的な考え方にあまり精通していないため、最初にウォーターフォールフローの考え方について説明しましょう。下の図を見てみましょう。

商品画像の高さが不揃いで、商品タイトルの行数も不揃いなため、最終的にずらした配置になっていることがわかります。

以前、開発過程で CSS Flex レイアウトと列レイアウトを使用して実現しようとしたこともありましたが、かろうじて同じ効果を得ることができましたが、最終的にはバックエンドに接続するときに製品の人気度を優先する必要があったため、断念せざるを得ませんでした。

Flex 実装の欠点: Flex レイアウトを使用すると、製品を挿入する高さを正確に計算できません。

列実装の欠点: 列レイアウトを使用する場合、シーケンスを操作するのは簡単ではありません。

PS: 商品の並べ替えが必要ない場合は、純粋な CSS 実装を検討できます。ここでは詳細には触れませんが、Nuggets には多くの実装があります。

3. コアコード

タイトルの通り、この記事のウォーターフォールフローの実装は uniapp が開発したミニプログラムに基づいています。ネイティブ JS 実装を期待する場合は、この記事の多くのアイデアを変更する必要があります。
まずいくつかの質問に答えさせてください:

列の高さは $refs を通じて取得できないため、コードは最初に Image タグの @load 時間を通じて画像を 1 回読み込み、画像の幅、高さ、およびその他の情報をメソッドに渡します。

// コンポーネント/ウォーターフォール.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;
                }
            }
        }
    }
</スクリプト>

この時点で、コアコードは完成です。

PS: このメソッドは画像の @load イベントによってトリガーされるため、大規模な読み込みはパフォーマンスに影響を及ぼします。そのため、自分でトレードオフを行う必要があります。

IV. 結論

この記事を読んでこの方法を使うことに決めた人は、この書き方はパフォーマンスの問題に影響を及ぼす可能性があるということを覚えておいて、この側面を徹底的に研究するよう努力してほしいと思います。

これで、uniapp アプレットのウォーターフォール フロー レイアウトを実装するためのアイデアとコードに関するこの記事は終了です。uniapp アプレットのウォーターフォール フロー レイアウトに関する関連コンテンツの詳細については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • WeChatアプレットはウォーターフォールフローのページングスクロール読み込みを実装します
  • ミニプログラムのウォーターフォールフローコンポーネントは、ページめくりと画像の遅延読み込みを実現します。
  • ミニプログラムでシンプルな2列のウォーターフォール効果を実装する
  • WeChatアプレットはjsを通じてウォーターフォールフローレイアウトを実装します
  • ウェブページとWeChatアプレットページにウォーターフォール効果を実装する
  • WeChatアプレットでウォーターフォールレイアウトと無限読み込みを実装する方法の詳細な説明
  • WeChat ミニプログラムで切り捨てられたウォーターフォール コンポーネントを実装するためのサンプル コード

<<:  MySQL 5.7.19 のインストールと設定方法のグラフィック チュートリアル (win10)

>>:  Centos6.5 で MySQL 5.7.19 をインストールして設定する方法

推薦する

elementui の el-popover スタイルの変更が有効にならない問題の解決策

element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...

ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法

現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...

EclipseのプロジェクトをTomcatに追加できない問題を解決する方法

1. プロジェクトを右クリックしてプロパティを選択します2. プロジェクトファセットをクリック3. ...

MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明

SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

MySQL でインデックスとして B+Tree を使用する利点は何ですか?

目次データベースにインデックスが必要なのはなぜですか?インデックスが B+Tree データ構造を使用...

CSS 背景と境界タグの例の詳細な説明

1. CSS背景タグ1.背景色を設定するbackground-ground-color プロパティは...

HTMLフレームワーク_Powernode Javaアカデミー

1. フレームワークブラウザのドキュメント ウィンドウには 1 つの Web ページ ファイルしか表...

MySQLクエリ最適化分析チュートリアルをステップバイステップで教えます

序文MySQL は、強力なクエリ機能、高いデータ一貫性、高いデータ セキュリティ、およびセカンダリ ...

jsは双方向データバインディング(アクセサ監視)を実現します

この記事の例では、双方向データバインディングを実現するためのjsの具体的なコードを参考までに共有して...

Windows 10 で MySQL を完全に削除してアンインストールする方法

序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...

nginx の場所に複数の Proxy_pass メソッドがある

1. まず、nginxの位置情報に関する関連知識を確認しましょう1) 位置マッチング手順: ~ #波...

Vue のフィルターの適用シナリオの詳細な説明

filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロン...

優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...