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 の影響についての詳細な説明

推薦する

Win10にCentOS7仮想マシンをインストールする

1. VMware Workstation 64バージョンをダウンロードするhttps://www....

MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介

MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...

MYSQLの文字セット設定方法(端末の文字セット)の詳しい説明

序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...

Docker に MySQL と MariaDB をインストールする方法

MySQLとMariaDBの関係MariaDB データベース管理システムは MySQL のブランチで...

nginxカスタム変数と組み込み定義済み変数の使用

概要Nginx では変数を使用して設定を簡素化し、設定の柔軟性を向上させることができます。すべての変...

Nginx のアクセス制御とパラメータ調整方法

Nginx グローバル変数Nginx には、$variable 名を通じて使用できるグローバル変数が...

Vue の高度なコンポーネント機能コンポーネントの使用シナリオとソースコード分析

目次導入使用シナリオソースコード分析要約する導入Vue は、コンポーネントをステートレスかつインスタ...

Windows 2016 Server セキュリティ設定

目次システムアップデート構成Windows Update サーバーの変更自動更新を有効にして許可する...

MySQLで関連テーブルを削除する実用的な方法

MySQL データベースでは、テーブルが互いに関連付けられた後は、それらを任意に削除することはできま...

Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...

MySQL パフォーマンスの包括的な最適化方法リファレンス、CPU、ファイルシステムの選択から mysql.cnf パラメータの最適化まで

この記事では、一般的な MySQL 最適化方法をいくつかまとめて簡単に紹介します。これは、フルタイム...

弾幕効果を実現するためのjQuery

この記事では、弾幕効果を実現するためのjQueryの具体的なコードを参考までに共有します。具体的な内...

Tomcatアーキテクチャの原則をアーキテクチャ設計に分析する

目次1. 学習目標1.1. Tomcatアーキテクチャの設計と原則をマスターして社内スキルを向上させ...

MySQL DDL による同期遅延を解決する方法

目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...