この記事では、参考までに、無限ロードウォーターフォールフローを実現するためのVueの具体的なコードを紹介します。具体的な内容は次のとおりです。 私が作成したウォーターフォールフローは、管理背景のメインコンテンツに似たネストされたページに配置されています。フルスクリーンに変更したい場合にも非常に便利です。実際、要素でonScrollを使用する際の落とし穴を回避できるため、より簡単です。 このウォーターフォールフローを通じて、次の知識ポイントを習得できます。 1. 要素のスクロール イベントをリッスンするのは、ウィンドウで直接リッスンするよりも少し面倒です。 ここでは、mockjs を使用して画像データをシミュレートし、その後、axios を通じて画像データを呼び出します。他のデータ ソースも使用できます。 画像の高さを計算して、画像を読み込む列を決定します。 コードを直接貼り付けてください。質問がある場合は、お気軽にご相談ください。 <テンプレート> <div class="waterfall wf-wrap" ref="waterfall" @scroll="onScroll"> <ul> <トランジショングループ名="リスト" タグ="li"> <li v-for="waterfallList 内の (item,index)" :key="インデックス" クラス="wf-item" :style="{top:item.top+ 'px',left:item.left+'px', width:item.width+'px', height:item.height + 'px'}" > <img :src="item.src" /> </li> </トランジショングループ> </ul> </div> </テンプレート> <スクリプト> "@/api/demo" から { getList } をインポートします。 エクスポートデフォルト{ 名前:「滝」 データ() { 戻る { 滝リスト: [], 滝Col: 5, 列幅: 236, マージン右: 10, マージン下: 10, 高さ: [], リストクエリ: { ページ: 1, 制限: 5, 並べ替え: "+id" }, 読み込み中: false、 表示: 真 }; }, マウント() { これを初期化します。 }, メソッド: { 初期化() { // 初期化されると、各列の高さは 0 になります this.colHeights = 新しい配列(this.waterfallCol); (i = 0 とします; i < this.colHeights.length; i++) { this.colHeights[i] = 0; } this.colWidth = (this.$refs.waterfall.clientWidth - (this.waterfallCol - 1) * this.marginRight) / this.waterfallCol; this.loadImgs(); }, 画像を読み込む() { this.loading = true; // API からデータを取得する getList(this.listQuery).then(res => { 画像を res.data.items とします。 promiseAll = [] とします。 画像 = [], 合計 = 画像の長さ; (i = 0 とします; i < 合計; i++) { promiseAll[i] = 新しいPromise(resolve => { imgs[i] = 新しい画像(); 画像URIをコピーする imgs[i].onload = () => { imgData = {} とします。 imgData.height = (imgs[i].height * this.colWidth) / imgs[i].width; imgData.width = this.colWidth; 画像URIをコピーします。 this.waterfallList.push(画像データ); this.rankImgs(画像データ); imgs[i]を解決します。 }; }); } Promise.all(promiseAll).then(() => { this.loading = false; これをさらに読み込む(); }); }); }, ロードモア() { もし ( this.$refs.waterfall.clientHeight + this.$refs.waterfall.scrollTop > this.filterMin().minHeight && this.loading == false ){ this.loading = true; タイムアウトを設定する(() => { this.loadImgs(); }, 200); } }, ランク画像(画像データ) { min = this.filterMin() とします。 imgData.top = min.minHeight; imgData.left = min.minIndex * (this.colWidth + this.marginRight); this.colHeights[min.minIndex] += imgData.height + this.marginBottom; }, フィルター最小値() { minHeight = Math.min.apply(null, this.colHeights); とします。 戻る { 最小高さ: 最小高さ、 最小インデックス: this.colHeights.indexOf(minHeight) }; }, スクロール() { これをさらに読み込む(); } } }; </スクリプト> <style lang="scss" スコープ> ul li { リストスタイル: なし; } .wf-wrap { 位置: 相対的; 幅: 100%; 高さ: 100%; オーバーフロー: スクロール; } .wf-item { 位置: 絶対; } .wf-item画像{ 幅: 100%; 高さ: 100%; } .list-enter-active、 .list-leave-active { 遷移: すべて 1; } .list-enter、.list-leave-to /* バージョン 2.1.8 未満では .list-leave-active */ { 不透明度: 0; 変換: translateY(30px); } </スタイル> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL UPDATE ステートメントの非標準実装コード
多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...
目次01 背景02 はじめに03 ワークフロー04 いくつかの質問05 ファイルをバックアップする0...
1. はじめにDocker には、タスクを構成する複数の Docker コンテナをオーケストレーショ...
この記事では、純粋な CSS3 を使用してモバイル端末での展開と折りたたみの効果を実装するサンプルコ...
いわゆるファビコンは、Favorites Icon の略で、中国語ではウェブサイトアバターと呼ばれて...
1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...
js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...
まず、href 属性と onclick イベントの実行順序について説明します。マウスが a タグをク...
1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...
目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...
序文Bash には、ls、cd、mv などの重要な組み込みコマンドが多数あるほか、grep、awk、...
説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...
1. 概要Redis Cluster は、Redis ノードのグループ間での高可用性とシャーディング...