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 をインストールして設定する方法

推薦する

Mac での MySQL と Squel Pro の設定

Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...

圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法

JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...

MySQLの文字セットと検証ルールの詳細な説明

1いくつかの一般的な文字セットMySQL で最も一般的な文字セットには、ASCII 文字セット、ラテ...

Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...

Nginxの現在の制限設定の詳細な説明

この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

HTML でよく使用されるエスケープ文字の概要

HTML でよく使用されるエスケープ文字をまとめると次のようになります。 &nbsp; 改行...

CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法

1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...

LinuxのバックグラウンドでPythonプログラムを実行するいくつかの方法

1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...

MySQL クラスタの詳細な説明: 1 つのマスターと複数のスレーブのアーキテクチャ実装

実験環境: 1. CentOS 7 サーバー 3 台2. mysql5.7.26 (3台のマシンはす...

Docker swarm を使用して Nebula Graph クラスターを迅速にデプロイする方法のチュートリアル

1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...

MySQL トリガーの原理と使用例の分析

この記事では、例を使用して、MySQL トリガーの原理と使用方法を説明します。ご参考までに、詳細は以...

デザインにおけるユーザーエクスペリエンスの背後にある8つのユーザー本能について話す

編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...