WeChatミニプログラムでの仮想リストの実装例

WeChatミニプログラムでの仮想リストの実装例

序文

ほとんどのミニプログラムには、このような要件があります。ページに長いリストがあり、一番下までスクロールするときにバックグラウンド データを要求する必要があります。データは継続的にレンダリングされます。データ リストが長い場合、明らかな遅延が発生し、ページが白い画面で点滅します。

分析する

  • バックグラウンド データを要求するには、一定の setData と継続的なデータ マージが必要であり、後の段階で過剰なデータ レンダリングが発生します。
  • レンダリングするDOM構造は多数あり、レンダリングするたびにDOMの比較が実行されます。関連する差分アルゴリズムは時間がかかり、
  • DOM が多数あり、大量のメモリを消費するため、ページがフリーズして白い画面が表示されます。

初期レンダリング方法

/*
 * @説明: 
 * @バージョン: 
 * @著者: 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次元配列に変更する

  • 通常、setData はすべてのデータを再レンダリングします。
  • ページ分割されたリクエストはサーバーにかかる負荷が比較的少なく、ページ分割された増分レンダリングもsetDataにかかる負荷が比較的少ない。
  • setDataは2次元配列のインデックスに対応するデータの添え字を検索し、setDataを使用して部分的な更新を実行します。
  • setDataの場合、現在の画面のデータのみが割り当てられます
// 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 レンダリングを減らし、ノードが多すぎることによる問題を軽減できます。

これを行うには、次の手順を分割する必要があります。

  • 現在の画面の高さを取得し、レンダリング時に各画面の高さを取得し、スクロール距離を計算します
  • 取得したレンダリングデータをすべて保存し、各画面の高さを保存し、onPageScrollを通じて可視領域がどの画面にあるかを計算します。
  • 表示領域を除いて、他の領域のデータは空であり、ビューはその場所を占めるために使用される
    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を応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレット仮想リストの応用例

<<:  Linux システムで Tomcat のポート 80 を使用する方法

>>:  MySQL のインデックスにおける NULL の影響についての詳細な説明

推薦する

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

画像を表示したり非表示にしたりするための JavaScript

JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...

JavaScript 文字列オブジェクトメソッド

目次文字列オブジェクトのメソッド方法 1: indexOf() (推奨)方法 2: search()...

JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する

目次序文基礎を築くプロトタイプコンストラクタのプロパティ__プロト__プロトタイプチェーン改善する要...

VMware vSphere 6.7 (ESXI 6.7) のグラフィック インストール手順

環境: VMware VCSA 6.7 (VMware-VCSA-all-6.7.0-8169922...

Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...

配列をフラット化する 5 つの JavaScript の方法

目次1. 配列の平坦化の概念2. 実装1. 減らす2. toString と split 3. 結合...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...

meta name="" content="の機能の詳細な説明

1. 文法: <meta name="名前" content="...

mysql 8.0.18.zip のインストールと構成方法のグラフィック チュートリアル (Windows 64 ビット)

以前にインストールされたバージョンのデータベースをアンインストールする方法については、この記事を参照...

Linux の Makefile とは何ですか? どのように機能しますか?

この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...

Tencent Cloud Server Centosにデータディスクをマウントする方法

まず、ハードディスクデバイスにデータディスクがあるかどうかを確認します # まずfdisk -lを実...

ハイパーリンクのWebデザイン原則

<br />関連記事: Web コンテンツ ページ作成のための 9 つの実用的なヒント、...

Vue のフィルターの適用シナリオの詳細な説明

filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロン...