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 をインストールして設定する方法
Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...
JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...
1いくつかの一般的な文字セットMySQL で最も一般的な文字セットには、ASCII 文字セット、ラテ...
Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...
この記事では、最も単純なものから最も複雑なものまで、Nginx の現在の制限構成を例を使って説明しま...
MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...
目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...
HTML でよく使用されるエスケープ文字をまとめると次のようになります。 改行...
1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...
1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...
実験環境: 1. CentOS 7 サーバー 3 台2. mysql5.7.26 (3台のマシンはす...
1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...
この記事では、例を使用して、MySQL トリガーの原理と使用方法を説明します。ご参考までに、詳細は以...
編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...