序文ほとんどのミニプログラムには、このような要件があります。ページに長いリストがあり、一番下までスクロールするときにバックグラウンド データを要求する必要があります。データは継続的にレンダリングされます。データ リストが長い場合、明らかな遅延が発生し、ページが白い画面で点滅します。 分析する
初期レンダリング方法/* * @説明: * @バージョン: * @著者: shijuwang * @日付: 2021-07-14 16:40:22 * @LastEditors: shijuwang * @最終編集時間: 2021-07-14 17:10:13 */ //ページオブジェクト ページ({ データ: { リスト: [], // すべてのデータ}, //オプション(オブジェクト) onLoad: 関数 (オプション) { this.index = 0 定数arr = [ { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, ] this.setData({ リスト: arr }) }, onReachBottom: 関数 () { 定数arr = [ { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, ] {リスト} = this.dataとします this.setData({ リスト: [...リスト、...arr] }) }, }); // wxml <ビュークラス="コンテナ"> <view class="item-list" wx:for="{{list}}"> <テキストクラス=""> {{item.idx}} </テキスト> </ビュー> </ビュー> 下部をタッチするたびに、データが再度要求され、配列がマージされ、setData がリセットされます。リストが責任を負う場合、白い画面が表示されます。setData のデータは毎回大きくなり、次の図に示すように、通信時間が増加し、DOM 要素が多すぎるようにレンダリングされます。 初期最適化1. 1次元配列を2次元配列に変更する
// wxml <ビュークラス="コンテナ"> <block wx:for="{{list}}" wx:for-index="pageNuma"> <view class="item-list" wx:for="{{item}}"> <text class="">{{item.idx}}</text> </ビュー> </ブロック> </ビュー> // wx.js ページ({ データ: { リスト: [], // すべてのデータ}, //オプション(オブジェクト) onLoad: 関数 (オプション) { this.index = 0; this.currentIndex = 0; // 現在のページ番号 pageNuma 定数arr = [ { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, ] this.setData({ [`list[${this.currentIndex}]`]: arr }) }, onReachBottom: 関数 () { this.currentIndex++; // 一番下まで +1 定数arr = [ { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, ] this.setData({ [`list[${this.currentIndex}]`]: arr }) }, }); このように、レンダリング全体が画面に基づいてページ単位でレンダリングされることがわかります。複数の pageNums が要求された場合、複数の画面がレンダリングされ、各リストが各画面にレンダリングされます。 さらなる最適化2 可視領域の 1 つの画面のみをレンダリングするか、可視領域の近くに複数の画面をレンダリングし、ビューを使用して特定のレンダリングを行わずに他の領域を占有することで、DOM レンダリングを減らし、ノードが多すぎることによる問題を軽減できます。 これを行うには、次の手順を分割する必要があります。
is.currentIndex = 0; // 現在のページ番号 pageNum this.pageHeight = []; //各画面の高さを保存 this.allList = []; //すべてのデータを取得 this.systemHeight = 0; //画面の高さ this.visualIndex = []; //表示領域pageNumを保存 ページに入るときに、関連データをマウントします。 // wxml <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}"> <view class="item-list" wx:for="{{item}}"> <text class="">{{item.idx}}</text> </ビュー> </ビュー> onLoad: 関数 (オプション) { this.index = 0; this.currentIndex = 0; // 現在のページ番号 pageNum this.pageHeight = []; // 各画面の高さが保存されます this.allList = []; // すべてのデータが取得されます this.systemHeight = 0; // 画面の高さ const arr = [ { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ }, { idx: this.index++ } ] this.setData({ [`list[${this.currentIndex}]`]: arr }, () => { ページの高さを設定します。 }); システム情報を取得します。 }, 各画面のビューのID名を動的に設定し、レンダリング中に各画面の高さの取得と保存を容易にします。ループpageHeightを使用して、後続の非表示領域の配置の高さを設定します。各ページの高さと現在のスクロール距離を比較に追加して、現在レンダリングされているpageNumを取得し、現在選択されているレンダリングされたpageNum-+1、前の画面、次の画面を配列に入れます。現在の3ページのデータが表示され、他の画面のデータはビューの配置に使用され、高さは保存されている高さです。 // スクロール距離の計算 onPageScroll: throttle(function (e) { pageScrollTop = e[0].scrollTopとします。 that = this とする; // 現在のページ画面を計算するためにスクロールします。let scrollTop = 0; currentIndex を this.currentIndex とします。 (var i = 0; i < this.pageHeight.length; i++) { scrollTop = scrollTop + this.pageHeight[i]; (スクロールトップ>ページスクロールトップ+this.systemHeight - 50){ this.currentIndex = i; this.visualIndex = [i - 1, i, i + 1]; that.setData({ ビジュアルインデックス: this.visualIndex }) 壊す; } } },200) スクロールとスロットリングの最適化のリアルタイム監視 const スロットル = (fn, 間隔) => { var enterTime = 0; //トリガー時間 var gapTime = interval || 300; //間隔時間。間隔が経過しない場合、デフォルトは300msです。 関数を返す(){ var that = this; var backTime = new Date(); //関数が最初に返される時刻がトリガーされます if (backTime - enterTime > gapTime) { fn.call(that, 引数); enterTime = backTime; // 最初のトリガーの時間を割り当てて、2 番目のトリガーの時間を保存します} }; } 表示領域の配列を取得し、現在の pageNum が visualIndex 内にあるかどうかを判断します。ある場合はレンダリングします。ない場合は、ビューがスペースを占有し、高さが取得されて保存されます。 <wxs モジュール = 'フィルター'> var includeList = function(リスト、現在のインデックス){ if(リスト){ list.indexOf(currentIndex) > -1 を返す } } module.exports.includesList = includeList; </wxs> <ビュークラス="コンテナ"> <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}" wx:key="pageNum"> <block wx:if="{{filter.includesList(visualIndex,pageNum)}}"> <view class="item-list" wx:for="{{item}}"> <text class="">{{item.idx}}</text> </ビュー> </ブロック> <ブロック wx:else> <view class="item-visible" style="height:{{pageHeight[pageNum]}}px"></view> </ブロック> </ビュー> </ビュー> 表示領域内の配列の pageNum が現在の配列にない場合は、高さのプレースホルダーが設定されます。レンダリング効果は次のようになります。 この方法はうまくいきます! 方法2 WeChatミニプログラムAPIの使用 //ビューモニター observePage: function (pageNum) { const that = this; const observerView = wx.createIntersectionObserver(this).relativeToViewport({ top: 0, bottom: 0}); observerView.observe(`#item${pageNum}`, (res) => { コンソールにログ出力します。 (res.intersectionRatio > 0)の場合{ that.setData({ ビジュアルインデックス: [ページ番号 - 1、ページ番号、ページ番号 + 1] }) } }) } oberserve を使用して、現在のページが可視領域内にあるかどうかを監視します。そうである場合は、現在の pageNum -+1 を格納し、pageNum を可視領域配列 visualIndex に格納します。wxs を使用して、現在の pageNum が可視領域配列内に存在するかどうかを判断します。存在する場合は、それをレンダリングします。存在しない場合は、view を使用してその場所を占有します。 解決策 1: スクロール計算 >>>コード スニペット: (スクロール仮想リスト) ソリューション 2 IntersectionObserver API >>> コード スニペット: intersectionObserver WeChatミニプログラムバーチャルリストの実装例に関するこの記事はこれで終わりです。より関連性の高いミニプログラムバーチャルリストのコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: Linux システムで Tomcat のポート 80 を使用する方法
>>: MySQL のインデックスにおける NULL の影響についての詳細な説明
目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...
JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...
目次文字列オブジェクトのメソッド方法 1: indexOf() (推奨)方法 2: search()...
目次序文基礎を築くプロトタイプコンストラクタのプロパティ__プロト__プロトタイプチェーン改善する要...
環境: VMware VCSA 6.7 (VMware-VCSA-all-6.7.0-8169922...
目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...
目次1. 配列の平坦化の概念2. 実装1. 減らす2. toString と split 3. 結合...
序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...
今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...
1. 文法: <meta name="名前" content="...
以前にインストールされたバージョンのデータベースをアンインストールする方法については、この記事を参照...
この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...
まず、ハードディスクデバイスにデータディスクがあるかどうかを確認します # まずfdisk -lを実...
<br />関連記事: Web コンテンツ ページ作成のための 9 つの実用的なヒント、...
filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロン...