序文ほとんどのミニプログラムには、このような要件があります。ページに長いリストがあり、一番下までスクロールするときにバックグラウンド データを要求する必要があります。データは継続的にレンダリングされます。データ リストが長い場合、明らかな遅延が発生し、ページが白い画面で点滅します。 分析する
初期レンダリング方法/* * @説明: * @バージョン: * @著者: 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. VMware Workstation 64バージョンをダウンロードするhttps://www....
MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...
序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...
MySQLとMariaDBの関係MariaDB データベース管理システムは MySQL のブランチで...
概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...
Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...
目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...
目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...
MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...
序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...
この記事では、一般的な MySQL 最適化方法をいくつかまとめて簡単に紹介します。これは、フルタイム...
この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...
目次1. 学習目標1.1. Tomcatアーキテクチャの設計と原則をマスターして社内スキルを向上させ...
目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...